title: angular 7 redirecting to another page
body: <p>I have a login page and a dashboard component.My problem is when i login from the page the dashboard displays below the login page, it is not redirecting as a new page.How to achieve this in angular 7? Any help would be helpful'. Thanks!!</p>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { 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 = 'Shopping-cart';
    user = []
    users = []
    public Candidate = []
    public showWhen:boolean = false;
  
    constructor(private _router: Router){}
  
    authenticateLogin(user){
      let authUser = JSON.parse(localStorage.getItem('auth'))
      console.log(user);
      if(user.mail === authUser[0] &amp;&amp; user.password === authUser[1]){
        this.showWhen = true;
        console.log("Logged in Successfully");
        this._router.navigate(['dashboard']);
      } else {
        console.error("Invalid email and password");
      }
    }
  
  }
  </code></pre>
  
  <p>This is my routing-module</p>
  
  <p><strong>app-routing.module.ts</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { DashboardComponent } from './dashboard/dashboard.component';
  
  const routes: Routes = [
    { path: 'dashboard', component: DashboardComponent} 
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes, { enableTracing: true })],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>