How to Pass Data Through Route in Angular: Simple Guide

In Angular, you can pass data through routes using route parameters or query parameters. Route parameters are part of the URL path, while query parameters are appended after a question mark. Use Angular's ActivatedRoute service to access this data in the target component.

Syntax

Angular supports two main ways to pass data through routes:

• Route Parameters: Defined in the route path with : prefix and accessed via ActivatedRoute.paramMap.
• Query Parameters: Appended to the URL after ? and accessed via ActivatedRoute.queryParamMap.

Example route definitions:

{ path: 'user/:id', component: UserComponent }

{ path: 'search', component: SearchComponent }

typescript

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

Example

This example shows how to pass a user ID as a route parameter and a search term as a query parameter, then read them in the components.

typescript

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

// UserComponent reads route parameter 'id'
@Component({ selector: 'app-user', template: '<p>User ID: {{ userId }}</p>' })
export class UserComponent implements OnInit {
  userId: string | null = null;
  constructor(private route: ActivatedRoute) {}
  ngOnInit() {
    this.userId = this.route.snapshot.paramMap.get('id');
  }
}

// SearchComponent reads query parameter 'term'
@Component({ selector: 'app-search', template: '<p>Search Term: {{ searchTerm }}</p>' })
export class SearchComponent implements OnInit {
  searchTerm: string | null = null;
  constructor(private route: ActivatedRoute) {}
  ngOnInit() {
    this.searchTerm = this.route.snapshot.queryParamMap.get('term');
  }
}

// Routes
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

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

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

Output

When navigating to '/user/42', the page shows: User ID: 42
When navigating to '/search?term=angular', the page shows: Search Term: angular

Common Pitfalls

• Trying to access route parameters before the route is fully initialized can cause null values; use snapshot or subscribe to paramMap.
• Confusing route parameters with query parameters; they are accessed differently.
• Not defining route parameters in the route path will prevent Angular from recognizing them.
• Using route.params observable is preferred for dynamic changes instead of only snapshot.

typescript

/* Wrong: Accessing param before route is ready */
ngOnInit() {
  const id = this.route.snapshot.paramMap.get('id');
  // If route changes, this won't update
}

/* Right: Subscribe to paramMap to react to changes */
ngOnInit() {
  this.route.paramMap.subscribe(params => {
    this.userId = params.get('id');
  });
}

Quick Reference

Method	Usage	Access in Component
Route Parameter	Defined in path as ':param'	this.route.snapshot.paramMap.get('param') or subscribe to paramMap
Query Parameter	Appended as '?key=value'	this.route.snapshot.queryParamMap.get('key') or subscribe to queryParamMap

Key Takeaways

Use route parameters for required data in the URL path and query parameters for optional data.

Access route data in components via ActivatedRoute's paramMap or queryParamMap.

Subscribe to paramMap or queryParamMap to handle dynamic route changes.

Always define route parameters in the route configuration path with a colon prefix.

Avoid mixing route parameters and query parameters; use them according to your data needs.