angular routing dynamic

 <p>nav1 works!</p>

<nav>

    <ul>

      <li><a routerLink="/Home" routerLinkActive="active">Home</a></li>

      <li><a routerLink="/Aboutus" routerLinkActive="active">AboutUs</a></li>

      <li><a routerLink="/Profile" routerLinkActive="active">Profile</a></li>

      <li><a routerLink="/User/1" routerLinkActive="active">User</a></li>

      <li><a routerLink="/User/2" routerLinkActive="active">User2</a></li>

    </ul>

  </nav>

  <!-- The routed views render in the <router-outlet>-->

  <router-outlet></router-outlet>

  

...................

usercomponent.html

<p>user works!</p>

the name is {{name}}

usercomponent.ts

import { Component, OnInit } from '@angular/core';

import { Router, ActivatedRoute, ParamMap } from '@angular/router';

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

@Component({

  selector: 'app-user',

  templateUrl: './user.component.html',

  styleUrls: ['./user.component.css']

})

export class UserComponent implements OnInit

 {

  name:string|null=null;  

  constructor( private route: ActivatedRoute) {

   

   }

  ngOnInit(): void {

    // this.route.queryParams.subscribe(params => {

    //   this.name = params['id'];

    // });

    this.name=this.route.snapshot.paramMap.get('id');

  }

}

routing module

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

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

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

import { AboutUsComponent } from './about-us/about-us.component';

import { ProfileComponent } from './profile/profile.component';

import { UserComponent } from './user/user.component';

const routes: Routes = [

  { path: 'Home', component: HomeComponent },

  { path: 'Aboutus', component:AboutUsComponent },

  {path:'Profile',component:ProfileComponent},

  {path:'User/:id',component:UserComponent}

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }