Navigation from One Comopnent to another in angular Framework

Navigation from One Comopnent to another in angular Framework  :-

Angular Provide Router class to manage navigation first we will import Router class under login component

import { Router } from '@angular/router';

First Create Component and design login form according to requirement ,I am designing sample login form using RectiveFormModule or Model Driven Form Approach.

write this code in design file or template file of component:-

 <form [formGroup] = "formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
      <input type = "text"  name = "emailid" placeholder = "emailid"
         formControlName = "emailid">
      <br/>
     
      <input type = "password" name = "passwd"
         placeholder = "passwd" formControlName = "passwd">
      <br/>
     
      <input type = "submit"  value = "Log In">
   </form>
   <p> Email entered is : {{emailid}} </p>


Write code on ts file means typescript file

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { Router } from '@angular/router';
@Component({
  selector: 'app-heroes',
  templateUrl: './login.component.html',
  styleUrls: ['.login.component.css']
})
export class LoginComponent implements OnInit {
 emailid;
 formdata;
  constructor(private router: Router) { }

  ngOnInit() {
   this.formdata = new FormGroup({
         emailid: new FormControl(""),
         passwd: new FormControl("")
      });
  }
  onClickSubmit(data) {this.emailid = data.emailid;
    alert(data.emailid);
    this.router.navigateByUrl('/home');
  }

}

note first define route using app-routing.module.ts 

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

import { CalcComponent } from './calc/calc.component'; 

import { CheckboxexampleComponent } from './checkboxexample/checkboxexample.component';

import { FactappComponent } from './factapp/factapp.component';

import { ScsComponent } from './scs/scs.component';

import { HomeComponent } from './home/home.component';

import { HeroesComponent } from './heroes/heroes.component';

import { AboutComponent } from './about/about.component';

const routes: Routes = [ 

 

   {path:"calc/:id", component:CalcComponent}, 

   {path:"checkbox", component:CheckboxexampleComponent},

   {path:"fact", component:FactappComponent} ,

    {path:"scs", component:ScsComponent} ,

    {path:"home", component:HomeComponent} ,

    {path:"about", component:AboutComponent},

    {path:"hero", component:HeroesComponent}

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { 

}