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

@NgModule({
  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';

@Component({
  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';

@Component({
  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 -->

Conclusion

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