Angular 8 dynamic routing working example

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 8 dynamic routing working example.

Black Friday Gift

In this post, I have made user component and in user component, I have many users with with dynamic urls with ids and that urls bring us to users information page.

Here are the complete steps and please follow them carefully:

1. Here are the basics commands to install angular 8 on your system:

npm install -g @angular/cli 

ng new angulardynamicid //Create new Angular Project

$ cd angulardynamicid // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url

2. Now you need to run below commands to generate components users and userdetails:

ng g component users

ng g component userdetails

3. Now you need to add below code into your src/app/app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { UsersComponent } from './users/users.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Routes, RouterModule } from '@angular/router';
import { UserdetailsComponent } from './userdetails/userdetails.component';

const appRoutes: Routes = [
  { path: 'user', component: UsersComponent },
  { path: 'user-detail/:id', component: UserdetailsComponent },
 

];
@NgModule({
  declarations: [
    AppComponent,
    UsersComponent,
    UserdetailsComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, 
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. Now you need to add below code into src/app/app.component.html file:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- <div class="jumbotron text-center">
  <h1>Angular 6 Routing Example</h1>
</div> -->
<nav class="navbar navbar-expand-sm bg-light">
  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link" routerLink="/">Home</a></li>
    <li class="nav-item"><a class="nav-link" routerLink="/user">users</a></li>
  </ul>
</nav>
<br>

<div class="container-fluid">
<h3><router-outlet></router-outlet></h3>
</div>

For bootstrap styling, I have directly added bootstrap cdn but we can add it right also and for that you can follow this :- Add Bootstrap in Angular

5. Now you need to add below code into src/app/users/users.component.html file:

<h1>Users</h1>
<ul class="nav nav-pills">
  <li class="nav-item"><a class="nav-link" routerLink="/user-detail/1">user1</a></li>
  <li class="nav-item"><a class="nav-link" routerLink="/user-detail/2">user2</a></li>
</ul>

6. Now you need to add below code into src/app/userdetails/userdetails.component.html file:

<h2> User No: {{id}}</h2>

7. Now you need to add below code into src/app/userdetails/userdetails.component.ts file:

import { Component, OnInit } from '@angular/core';
import {Router, ActivatedRoute, Params} from '@angular/router';
@Component({
  selector: 'app-userdetails',
  templateUrl: './userdetails.component.html',
  styleUrls: ['./userdetails.component.css']
})
export class UserdetailsComponent implements OnInit {

  constructor(private activatedRoute: ActivatedRoute) {}
  public id: string;
  ngOnInit() {

     // Note: Below 'queryParams' can be replaced with 'params' depending on your requirements
     this.id = this.activatedRoute.snapshot.paramMap.get('id');
     console.log(this.id);
  
    
  }

}

This is it and if you have any query related to this post then please do comment below.

Jassa

Thank you