Route Parameters in Angular

Route parameters in Angular allow you to pass information through the URL, enabling dynamic navigation. This tutorial covers the basics of using route parameters effectively in your Angular applications.

Setting Up Route Parameters

To set up route parameters, you need to define them in your route configuration:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';

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

@NgModule({
  declarations: [AppComponent, UserComponent],
  imports: [BrowserModule, RouterModule.forRoot(routes)],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

@Component({
  selector: 'app-user',
  template: '
User Component
User ID: {{ userId }}
',
})
export class UserComponent implements OnInit {
  userId: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.userId = this.route.snapshot.paramMap.get('id');
  }
}

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }

// app.component.html

Accessing Route Parameters

Use the ActivatedRoute service to access route parameters. In this example, the user ID is retrieved from the route and displayed:

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

@Component({
  selector: 'app-user',
  template: '
User Component
User ID: {{ userId }}
',
})
export class UserComponent implements OnInit {
  userId: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.userId = this.route.snapshot.paramMap.get('id');
  }
}

Handling Route Parameter Changes

If the route parameters can change while the component is still active, you need to subscribe to the parameter changes:

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

@Component({
  selector: 'app-user',
  template: '
User Component
User ID: {{ userId }}
',
})
export class UserComponent implements OnInit {
  userId: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.userId = params.get('id');
    });
  }
}

Key Points

Conclusion

Route parameters in Angular provide a powerful way to pass information through the URL and enable dynamic navigation. By understanding and using route parameters effectively, you can create dynamic and user-friendly applications with seamless navigation. Happy coding!