Angular 8Bootstrap 4

Angular 8 dynamic routing working example

Angular 8 dynamic routing working example
Views

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

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

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

Positive SSL