title: Redirect to another page Angular 2
body: <p>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.</p>
  
  <p>My problem is as a I've inside the login html this <code>(&lt;router-outlet&gt;&lt;/router-outlet&gt;)</code> 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.</p>
  
  <p>I try to use window.location.href but doesn't work the information continued to show in the same place of the login.</p>
  
  <p>This is my Route Configuration.</p>
  
  <pre><code>export const routes: Routes = [
      { path: 'show_alunos', component: ListAlunosComponent }
  ];
  </code></pre>
  
  <p>The component ListAlunosComponent is the new page I want to display after validate the credentials of the user.</p>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;form class="form-signin"&gt;
      &lt;h2 class="form-signin-heading"&gt;Please sign in&lt;/h2&gt;
      &lt;label for="inputEmail" class="sr-only"&gt;Email address&lt;/label&gt;
      &lt;input [(ngModel)]="email" name="email" type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus&gt;
      &lt;label for="inputPassword" class="sr-only"&gt;Password&lt;/label&gt;
      &lt;input [(ngModel)]="password" name="password" type="password" id="inputPassword" class="form-control" placeholder="Password" required&gt;
      &lt;div class="checkbox"&gt;
        &lt;label&gt;
          &lt;input type="checkbox" value="remember-me"&gt; Remember me
        &lt;/label&gt;
      &lt;/div&gt;
      &lt;button class="btn btn-lg btn-primary btn-block" (click)="submit()" type="submit"&gt;Sign in&lt;/button&gt;
    &lt;/form&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>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']);
     }
  }
  </code></pre>
  
  <p>app.router.ts</p>
  
  <pre><code>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);
  </code></pre>