Redirect to another page Angular 2

Question

I have a login page with a form and one button to do the login. When the user click in the button I want to evaluate the password and email and if all is correct the user must be redirected to another page.

My problem is as a I've inside the login html this (<router-outlet></router-outlet>) all the information of the new page is showed in the same place of the login page and I don't want to mix both information. I want to have the login separate of the new information.

I try to use window.location.href but doesn't work the information continued to show in the same place of the login.

This is my Route Configuration.

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

The component ListAlunosComponent is the new page I want to display after validate the credentials of the 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 } from '@angular/core';
import { Router } from '@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 }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { ListAlunosComponent } from '../pages/list-alunos/list-
alunos.component';

// Route Configuration.
export const routes: Routes = [
    { path: 'show_alunos', component: ListAlunosComponent }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

Answer 1

After you check e-mail and passwork try:

router.navigate(['/show_alunos'])

And in constructor declare

constructor (private router: Router)

And import { Router } from "@angular/router";

UPDATED:

Simple example how to 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 } from '@angular/core';
import { FormControl, FormGroup } from "@angular/forms";
import { Router } from "@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 you need import this component and ListAlunosComponent too. Then you need import this components and write in your routing config .ts file:

{ path: 'show_alunos', component: ListAlunosComponent }