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}

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



Create Parameters under routerLink


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



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';
  selector: 'app-calc',
  templateUrl: './calc.component.html',
  styleUrls: ['./calc.component.css']
export class CalcComponent implements OnInit {
  constructor(private _Activatedroute:ActivatedRoute) { 



Call id under .html file

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