“`html

Query Params in Angular

When building single-page applications with Angular, query parameters are a useful way to pass information between different components or routes. In this article, we will explore how to work with query params in Angular.

Setting Query Params

In Angular, you can set query parameters using the ActivatedRoute service. You can access the current route’s query parameters using the queryParams property. For example:

    
    import { ActivatedRoute } from '@angular/router';

    constructor(private route: ActivatedRoute) {
        this.route.queryParamMap.subscribe(params => {
            console.log(params.get('paramName'));
        });
    }
    
    

Retrieving Query Params

To retrieve query parameters in Angular, you can use the ActivatedRoute service as well. You can access the query parameters using the snapshot property. For example:

    
    import { ActivatedRoute } from '@angular/router';

    constructor(private route: ActivatedRoute) {
        console.log(this.route.snapshot.queryParamMap.get('paramName'));
    }
    
    

Handling Query Params Changes

If you need to react to changes in query parameters, you can subscribe to the queryParams property of the ActivatedRoute service. For example:

    
    import { ActivatedRoute } from '@angular/router';

    constructor(private route: ActivatedRoute) {
        this.route.queryParams.subscribe(params => {
            console.log('Query params have changed:', params);
        });
    }
    
    

With these techniques, you can easily work with query parameters in your Angular applications. Whether you need to set, retrieve, or react to changes in query params, the ActivatedRoute service provides the necessary tools to handle them effectively.

“`