angular 2 routing to different page

Question

i have been trying to navigate to different pages using angular 2. it navigates but the content of the previous page also gets displayed. Please help me out. Screenshot

In the image, when i click on sign up button, i get the text register, but i want the buttons to go and only the text "register" to appear.

app.component.html-

<div class='col-md-4'>
<button type=button class="btn btn-lg btn-primary" (click)="onClick1();">Sign In</button>
<button type=button class="btn btn-lg btn-default" (click)="onClick2();">Sign Up</button>
</div>
<div class="outer-outlet">
<router-outlet></router-outlet>
</div>
</div>

app.routes.ts-

import { Routes} from '@angular/router';
import { SignInComponent } from './SignIn/signin.component';
import { SignUpComponent } from './SignUp/signup.component';

export const routes: Routes = [
{ path: '', redirectTo: 'signUp', pathMatch: 'full' },
{ path: 'signIn', component: SignInComponent },
{ path: 'signUp', component: SignUpComponent }];

main.ts-

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { RouterModule} from '@angular/router';
import { SignInComponent } from './SignIn/signin.component';
import { SignUpComponent } from './SignUp/signup.component';
import { routes } from './app.routes';
@NgModule({
imports: [ BrowserModule, FormsModule, RouterModule.forRoot(routes)],
declarations: [ AppComponent, SignInComponent, SignUpComponent],
bootstrap: [ AppComponent ]
})
class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);

DeborahK · Accepted Answer · 2017-06-24 00:30:05Z

1

The buttons are on your application shell, so they will always appear.

If you don't want them to appear on every route, then move the buttons to their own route.

For example: app.routes.ts would contain ONLY the router-outlet (no buttons)

Routes would be:

export const routes: Routes = [
  { path: '', redirectTo: 'welcome', pathMatch: 'full' },
  { path: 'signIn', component: SignInComponent },
  { path: 'signUp', component: SignUpComponent },
  { path: 'welcome', component: WelcomeComponent }
];

The welcome component would contain the buttons.

answered Jun 24, 2017 at 0:30

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular 2 routing to different page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related