Redirect to another page Angular 2 -

i have login page form , 1 button login. when user click in button want evaluate password , email , if correct user must redirected page.

my problem i've inside login html (<router-outlet></router-outlet>) information of new page showed in same place of login page , don't want mix both information. want have login separate of new information.

i try use window.location.href doesn't work information continued show in same place of login.

this route configuration.

export const routes: routes = [     { path: 'show_alunos', component: listalunoscomponent } ]; 

the component listalunoscomponent new page want display after validate credentials of user.

app.component.html

<form class="form-signin">     <h2 class="form-signin-heading">please sign in</h2>     <label for="inputemail" class="sr-only">email address</label>     <input [(ngmodel)]="email" name="email" type="email" id="inputemail" class="form-control" placeholder="email address" required autofocus>     <label for="inputpassword" class="sr-only">password</label>     <input [(ngmodel)]="password" name="password" type="password" id="inputpassword" class="form-control" placeholder="password" required>     <div class="checkbox">       <label>         <input type="checkbox" value="remember-me"> remember me       </label>     </div>     <button class="btn btn-lg btn-primary btn-block" (click)="submit()" type="submit">sign in</button>   </form>   <router-outlet></router-outlet> 

app.component.ts

mport { component } '@angular/core'; import { router } '@angular/router'  @component({    selector: 'app-root',    templateurl: './app.component.html',    styleurls: ['./app.component.css'] }) export class appcomponent {    title = 'app';    public email: string;    public password: string;     constructor(private router: router) {        this.email = "";        this.password = "";     }     public submit(): void {         this.router.navigatebyurl(['show_alunos']);    } } 

app.router.ts

import { modulewithproviders }  '@angular/core'; import { routes, routermodule } '@angular/router';  import { appcomponent } './app.component'; import { listalunoscomponent } '../pages/list-alunos/list- alunos.component';  // route configuration. export const routes: routes = [     { path: 'show_alunos', component: listalunoscomponent } ];  export const routing: modulewithproviders = routermodule.forroot(routes); 

after check e-mail , passwork try:

router.navigate(['/show_alunos']) 

and in constructor declare

constructor (private router: router) 

and import { router } "@angular/router";

updated:

simple example how user ruter:

your.component.html:

<form [formgroup]="myform" (ngsubmit)="onsubmit()">   <input type="text" formcontrolname="email">   <input type="password" formcontolname="password">   <input type="submit" value="login"> </form> 

your.component.ts:

import { component, oninit } '@angular/core'; import { formcontrol, formgroup } "@angular/forms"; import { router } "@angular/router";  @component({   selector: 'component-tag-name',   templateurl: './your.component.html' })  export class yourcomponentname implements oninit {  myform: formgroup;  constructor(private router: router) {}  ngoninit(){  this.myform = this.formgroup({    'email': new formconrol(null, [validators.required]),    'password': new formcontrol(null, [validators.required])   }) }  onsubmit(){   let email = this.myform.get('email').value;   let password = this.myform.get('password').value;    if (email === 'your value' && password === 'your value'){     this.router.navigate(['/show_alunos']);   }    } 

in yout app.module.ts need import component , listalunoscomponent too. need import components , write in routing config .ts file:

{ path: 'show_alunos', component: listalunoscomponent }