Angular Route Parameters And Query Params Complete Guide

Last Update:2025-06-22T00:00:00 .NET School AI Teacher - SELECT ANY TEXT TO EXPLANATION. 6 mins read Difficulty-Level: beginner

Understanding the Core Concepts of Angular Route Parameters and Query Params

Angular Route Parameters and Query Params

Route Parameters

Route parameters are a dynamic segment of a URL that can be used to pass specific information to a route. This type of parameter is essential when there are sections of your app that need to display different content based on the specific identifier passed.

Usage:

Defining Route Parameters: To include parameters in a route configuration, you can add a colon : followed by a parameter name. For example, a route for viewing a specific user might look like this:
```
const routes: Routes = [
  { path: 'user/:id', component: UserComponent }
];
```
In this example, :id is a route parameter.

Accessing Route Parameters: You can access route parameters using the ActivatedRoute service in your component. Suppose you need to fetch details for a user whose ID is passed as a route parameter. Here’s how you can do it:

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

@Component({
  selector: 'app-user',
  template: `<h1>User Details</h1>`
})
export class UserComponent implements OnInit {
  userId: number;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.userId = parseInt(params.get('id'), 10);
      // Use userId to fetch user details
    });
  }
}

Query Parameters

Query parameters are used to pass optional data to routes. Unlike route parameters, they are not embedded within the URL path but appear at the end of a URL string as key-value pairs.

Usage:

Setting Query Parameters: You can set query parameters when navigating to a route using the Router service's navigate or navigateByUrl methods.
```
import { Router } from '@angular/router';

constructor(private router: Router) {}

navigateToUserPage() {
  this.router.navigate(['/user/123'], { queryParams: { page: 2, sort: 'asc' } });
}
```
This will result in a URL like /user/123?page=2&sort=asc.
Accessing Query Parameters: Similar to route parameters, query parameters can be accessed via the ActivatedRoute service.

Online Code run

🔔 Note: Select your programming language to check or run code at

💻 Run Code Compiler

Step-by-Step Guide: How to Implement Angular Route Parameters and Query Params

Step 1: Set Up the Angular Project

First, make sure you have Angular CLI installed. If not, install it using npm:

npm install -g @angular/cli

Create a new Angular app:

ng new angular-routing-params-example
cd angular-routing-params-example

Step 2: Install Angular Router

Angular CLI installs Angular Router by default, but if it’s not present, you can install it using:

ng add @angular/router

Step 3: Create Components

Generate two components for demonstration purposes:

ng generate component product
ng generate component search

Step 4: Configure the Routes

Open app-routing.module.ts and set up some routes with route parameters and query parameters.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProductComponent } from './product/product.component';
import { SearchComponent } from './search/search.component';

const routes: Routes = [
  { path: 'product/:id', component: ProductComponent },  // Route Parameter Example
  { path: 'search', component: SearchComponent }             // Query Parameter Example
];

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

Step 5: Implement Route Parameters in `ProductComponent`

Update product.component.ts to receive and use the route parameter:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { switchMap } from 'rxjs/operators';

@Component({
  selector: 'app-product',
  template: `<div>
    <h1>Product Details</h1>
    <p>Product ID: {{ productId }}</p>
  </div>`
})
export class ProductComponent implements OnInit {
  productId: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.paramMap.pipe(
      switchMap((params: ParamMap) => {
        return params.get('id');
      })
    ).subscribe((id: string) => {
      this.productId = id;
    });
  }
}

Step 6: Implement Query Parameters in `SearchComponent`

Update search.component.ts to receive and use the query parameter:

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

@Component({
  selector: 'app-search',
  template: `<div>
    <h1>Search Results</h1>
    <p>Search Query: {{ query }}</p>
  </div>`
})
export class SearchComponent implements OnInit {
  query: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.queryParamMap.subscribe((params: any) => {
      this.query = params['query'];
    });
  }
}

Step 7: Update Navigation in `app.component.html`

To test these routes, update app.component.html with navigation links:

<nav>
  <a routerLink="/product/123">Go to Product 123</a>
  <br>
  <a routerLink="/search" [queryParams]="{ query: 'laptop' }">Search for 'laptop'</a>
</nav>

<router-outlet></router-outlet>

Step 8: Run Your Application

Run your Angular application by executing:

ng serve

You should be able to navigate to:

http://localhost:4200/product/123 to see the productId displayed.
http://localhost:4200/search?query=laptop to see the query parameter shown.

That's it! You now have a complete example demonstrating both route parameters and query parameters in Angular.

Top 10 Interview Questions & Answers on Angular Route Parameters and Query Params

Top 10 Questions and Answers on Angular Route Parameters and Query Params

Answer: Route parameters are variables that can be included in URLs and are passed to your router to provide information about the specific route. They are useful when you need to pass unique identifiers (like an id number) to a component. For instance, in a URL like /product/123, 123 is a route parameter representing the id of a product.

2. How do I define route parameters in Angular routing configuration?

Answer: You define route parameters in the path of your routes using a colon (:) followed by the parameter name. Here’s an example:
```
const routes: Routes = [
  { path: 'product/:id', component: ProductDetailComponent }
];
```
In this scenario, :id is the route parameter.

3. How can I access route parameters in a component?

Answer: You can access route parameters through the ActivatedRoute object provided by Angular's router module. Inject it into your component, and use its snapshot.paramMap.get() method or subscribe to paramMap observable to get the parameter value:
```
import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  const productId = this.route.snapshot.paramMap.get('id');
  console.log(productId);  // logs the 'id' route parameter
}
```

4. What are query parameters in Angular?

Answer: Query parameters are extra pieces of information attached to URLs after a question mark (?). Unlike route parameters, they don’t correspond to parts of the URL but can optionally hold data related to the current route. For instance, in the URL /products?sort=name, sort=name is a query parameter.

5. How do I set query parameters in a route navigation call?

Answer: When navigating to a new route, you can include query parameters using the queryParams option in the navigation extras:
```
this.router.navigate(['products'], { queryParams: { sort: 'name', order: 'asc' } });
```

6. Can query parameters be optional in Angular?

Answer: Yes, query parameters are inherently optional. You do not need to specify or check their presence as they do not affect the path resolution. However, it's good practice to handle cases where they might not be provided.

7. How do I retrieve query parameters in an Angular component?

Answer: Similar to route parameters, query parameters can also be accessed by injecting the ActivatedRoute service in your component. Use snapshot.queryParamMap.get() method or subscribe to queryParamMap observable:
```
this.route.snapshot.queryParamMap.get('sort');
// OR 
this.route.queryParamMap.subscribe(params => {
  const sortParam = params.get('sort');
  console.log(sortParam);
})
```

8. Can I change query parameters without navigating to a new route in Angular?

Answer: Yes, you can modify query parameters while staying on the same route using replaceState(true) or queryParamsHandling.

this.router.navigate([], {
  relativeTo: this.route,
  queryParams: { filter: 'active' },
  queryParamsHandling: 'merge'  // or 'preserve'
});

queryParamsHandling: 'merge' updates the existing query parameters while preserving others, whereas 'preserve' only replaces specified ones.

9. How do I ensure type safety with route and query parameters in Angular?

Answer: While ActivatedRoute provides methods like .get(), these methods return string values. To enforce type safety you may use Angular’s router state management alongside some manual casting or third-party libraries like rxjs operators for parsing.

Example conversion:

const productId = parseInt(this.route.snapshot.paramMap.get('id') || '0', 10);

10. When should I use route parameters versus query parameters? - Answer: Use route parameters to represent essential path information necessary for uniquely identifying a resource or section of your application. They’re ideal when navigating directly to specific entities, such as a profile or item detail page.

Angular Route Parameters And Query Params Complete Guide