Wednesday, June 12, 2024
Angular 8Bootstrap 4

Angular 8 dynamic routing working example

Angular playing api data

Hello to all, welcome to 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 },

  declarations: [
  imports: [
      { 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="">
<!-- <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>

<div class="container-fluid">


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:

<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>


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';
  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.activatedRoute.snapshot.paramMap.get('id');



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


Thank you

the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.