Stay Tuned!

Subscribe to our newsletter to get our newest articles instantly!


How to create dynamic route in Angular

Dynamic routing in Angular empowers developers to handle varying data and navigate users to specific content or components based on dynamic parameters. Leveraging route parameters enables the creation of flexible and adaptable routes within an Angular application. Let’s explore the process of creating dynamic routes in Angular for versatile navigation.

Setting Up Dynamic Routes

1. Route Configuration

Define dynamic routes in the Angular AppRoutingModule by specifying route parameters using the colon (:) syntax:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DynamicComponent } from './dynamic/dynamic.component';

const routes: Routes = [
  { path: 'dynamic/:id', component: DynamicComponent },
  // Define additional dynamic routes as needed

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

2. Accessing Route Parameters

In the dynamic component (DynamicComponent in this example), access route parameters using Angular’s ActivatedRoute:

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

  selector: 'app-dynamic',
  templateUrl: './dynamic.component.html',
  styleUrls: ['./dynamic.component.css']
export class DynamicComponent implements OnInit {
  dynamicId: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.route.params.subscribe(params => {
      this.dynamicId = params['id'];
      // Use the dynamicId parameter in component logic

3. Navigating to Dynamic Routes

Navigate to dynamic routes by passing dynamic parameters when using the Angular router’s navigate() method:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

  selector: 'app-any-component',
  templateUrl: './any-component.component.html',
  styleUrls: ['./any-component.component.css']
export class AnyComponent {

  constructor(private router: Router) { }

  goToDynamicRoute(id: string) {
    this.router.navigate(['/dynamic', id]);

4. Displaying Dynamic Content

In the HTML template of the dynamic component, utilize the received route parameters:

<p>Dynamic ID: {{ dynamicId }}</p>
<!-- Display dynamic content based on the received ID -->


Creating dynamic routes in Angular involves configuring routes with route parameters, accessing parameters using ActivatedRoute, navigating to dynamic routes with dynamic parameters, and displaying content based on the received parameters. This functionality allows for versatile navigation and content presentation within Angular applications.

You Might Also Like

  • Lorem ipsum dolarorit ametion consectetur
  • The Blues Kitchen woks Podcast
  • Chasing Dreams in Slow Motion
  • If you use this site regularly and would like to help keep the site on the Internet,
  • Dolarorit ametion consectetur elit.
  • Modern Office Must-Have in 2021
  • If you are going to use a passage of Lorem
  • Lorem ipsum consectetur elit.


About Author

Leave a comment

Your email address will not be published. Required fields are marked *

You may also like


How to format date in Angular 12

In Angular 12 applications, formatting dates is a common requirement for presenting dates in various formats within the user interface.
Angular CSS

How to add CSS class on click in Angular

In Angular applications, dynamically adding CSS classes on user interaction, such as a click event, offers a way to enhance