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"

How to  pass parameter using RouterLink in Angular 9:-

Step1st:-  Create 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';

const routes: Routes = [
   {path:"calc/:id", component:CalcComponent},
   {path:"checkbox", component:CheckboxexampleComponent},
   {path:"fact", component:FactappComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {


}

step2nd:-

Create Parameters under routerLink

<div>

<h1>Angular 7 Routing Demo</h1>
<nav>
   <a [routerLink] = "['/calc', '1']">Calculator</a>
   <a routerLink = "/checkbox">CheckBoxexample </a>
   <a routerLink = "/fact">Factorial </a>
</nav>
<router-outlet></router-outlet>

<app-heroes></app-heroes>
 </div>


Step3rd:-

Go into calc.comonent.ts and import ActivatedRoute Services and Inject its under Constructor



import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-calc',
  templateUrl: './calc.component.html',
  styleUrls: ['./calc.component.css']
})
export class CalcComponent implements OnInit {
  result=''
  id
  constructor(private _Activatedroute:ActivatedRoute) { 

    this.result=''
    this.id=this._Activatedroute.snapshot.paramMap.get("id");
  }

}

Call id under .html file
{{id}}




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