Java, .NET, PHP, PYTHON, ANGULAR, .NET, ML, Data Scince, Testing, CI Tutorials in Easy Languages.

"Best Software Training, Internship, Project Development center of Indore India, Helpline 780506-3968"

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 { 


}


Post a Comment

If you have any doubt in programming or join online classes then you can contact us by comment .

Previous Post Next Post