Unlocking Dynamic Navigation with Parameters in Angular Applications

• routerLink is a directive in Angular that helps you create links for navigation within your application.
• It accepts an array of path segments and an optional object for query parameters.
• Route parameters are defined in your routing configuration using a colon (:) followed by a parameter name within a path segment. For example, '/products/:id' defines a route that expects a parameter named id.

Passing a Parameter from a Dynamic URL Segment:

1. Extract the Parameter from the URL:

   • Utilize the ActivatedRoute service to access information about the current route, including parameters.
   • Inject ActivatedRoute into your component's constructor.
   • In the ngOnInit lifecycle hook, use the params observable provided by ActivatedRoute to retrieve the parameter value:

   import { Component, OnInit } from '@angular/core';
   import { ActivatedRoute } from '@angular/router';
   
   @Component({
     selector: 'app-my-component',
     templateUrl: './my-component.component.html',
     styleUrls: ['./my-component.component.css']
   })
   export class MyComponent implements OnInit {
     productId: string;
   
     constructor(private route: ActivatedRoute) {}
   
     ngOnInit() {
       this.route.params.subscribe(params => {
         this.productId = params['id'];
         // Use the extracted parameter (this.productId) for further actions
       });
     }
   }
   

2. Construct the Navigation Link:

   • Within your component's template, use routerLink to create a link.
   • Include the base path segments leading up to the dynamic parameter.
   • Use string interpolation or template literals to dynamically insert the extracted parameter value into the appropriate path segment:

   <a [routerLink]="['/products', this.productId]">View Product Details</a>
   

Complete Example:

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductDetailComponent } from './product-detail.component';

const routes: Routes = [
  { path: 'products/:id', component: ProductDetailComponent }
];

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

// product-detail.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {
  productId: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.productId = params['id'];
    });
  }
}

// product-detail.component.html
<p>You are viewing product details for: {{ productId }}</p>

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductDetailComponent } from './product-detail.component';

const routes: Routes = [
  { path: 'products/:id', component: ProductDetailComponent } // Dynamic parameter for product ID
];

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

Product Detail Component (product-detail.component.ts):

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

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {
  productId: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.productId = params['id'];
    });
  }
}

<p>You are viewing product details for: {{ productId }}</p>

<a [routerLink]="['/products', this.productId, 'edit']">Edit Product</a>

Explanation:

• The app-routing.module.ts defines a route for /products/:id that expects a dynamic parameter named id.
• The ProductDetailComponent injects ActivatedRoute and uses the params observable to retrieve the id parameter in the ngOnInit lifecycle hook.
• The template displays the extracted productId and demonstrates how to create a link using the parameter in a path segment (/products/:id/edit).

Additional Notes:

• Remember to import RouterModule from @angular/router and ActivatedRoute from @angular/router in your modules and components, respectively.
• This example showcases passing a parameter to a dynamic segment. You can also use routerLink to pass query parameters if needed.
• This code is functional and assumes you have a basic understanding of Angular routing and component communication.

This method is similar to the previous example, but it offers a cleaner syntax using template literals (backticks).

<a [routerLink]="`/products/${productId}/edit`">Edit Product</a>

• We directly construct the URL string within the routerLink binding using template literals.
• Inside the backticks, we can embed expressions like productId to dynamically include the parameter value.

Using a Separate Function to Build the URL:

This approach promotes code reusability and separation of concerns:

// product-detail.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {
  productId: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.productId = params['id'];
    });
  }

  getProductEditLink(): string {
    return `/products/${this.productId}/edit`;
  }
}

// product-detail.component.html
<a [routerLink]="getProductEditLink()">Edit Product</a>

• We define a method getProductEditLink() that constructs the URL string with the productId.
• In the template, we bind the routerLink directive to the return value of this function.

Using router.navigate() Programmatically:

This method allows you to navigate programmatically from within your component's logic using the router service:

// product-detail.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {
  productId: string;

  constructor(private route: ActivatedRoute, private router: Router) {}

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.productId = params['id'];
    });
  }

  editProduct() {
    this.router.navigate(['/products', this.productId, 'edit']);
  }
}

// product-detail.component.html
<button (click)="editProduct()">Edit Product</button>

• We inject the Router service alongside ActivatedRoute.
• The editProduct() method utilizes router.navigate() to programmatically navigate to the edit route with the productId.
• This approach is useful when you need to trigger navigation based on user interactions.

Choosing the Right Method:

• The first two methods (string interpolation and separate function) are ideal for simple cases where you directly link to another route using the parameter.
• The third method (programmatic navigation) is beneficial when you need to control navigation more dynamically based on component logic.