DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
  1. DZone
  2. Coding
  3. Frameworks
  4. How to Use QueryParamsHandling in Angular

How to Use QueryParamsHandling in Angular

QueryParamsHandling is a routing strategy that allows developers to control how query parameters are handled when the URL changes.

Akash Chauhan user avatar by
Akash Chauhan
·
Oct. 15, 22 · Tutorial
Like (2)
Save
Tweet
Share
4.79K Views

Join the DZone community and get the full member experience.

Join For Free

When building single-page applications, it is common for the URL to change without the page actually reloading.

This can create problems when trying to access query parameters from the URL. The QueryParamsHandling feature in Angular can help solve this problem. QueryParamsHandling is a routing strategy that allows developers to control how query parameters are handled when the URL changes.

By default, Angular will reset the query parameters when the URL changes. However, with QueryParamsHandling, developers can choose to preserve or merge query params when the URL changes.

There are several benefits to using QueryParamsHandling in Angular applications. 

First, it allows developers to have more control over how their application behaves.

Second, it can make it easier to debug and test applications since query params will always be consistent.

In this article, I am going to give a brief introduction to QueryParamsHandling and its type in angular.

Learning Objective

  • What is QueryParamsHandling ? 
  • QueryParamsHandling types or values
  • QueryParamsHandling default example
  • QueryParamsHandling merge example
  • QueryParamsHandling preserve example
  • Summary

What Is QueryParamsHandling?

QueryParamsHandling is a built-in Angular routing feature that allows developers to specify how query parameters should be handled when creating or matching routes. It is a feature in Angular that enables developers to specify how query parameters should be handled when routing.

This can be useful for things like creating links that preserve the state of a form or keeping track of pagination history.

When building single-page applications, there are times when we need to be able to control how our query parameters are handled. By default, Angular will just pass along the query parameters to the route.

However, there are times when we need to be able to specify if a query parameter should be optional or required. This is where the QueryParamsHandling option comes in. 

QueryParamsHandling Types or Values

There are three different QueryParamsHandling values that can be used: 

•    Merge: This is the default option and will simply merge the new query parameters with any existing query parameters that are already on the URL. 

•    Preserve: This option will preserve any existing query parameters on the URL and will not add any new ones. 

•    Replace: This option will replace any existing query parameters with the new ones being added.

By default, QueryParamsHandling is set to "merge" which means that any query parameters that are not specified in the route definition will be ignored.

However, developers can also set QueryParamsHandling to "preserve" which will preserve all query parameters from the current URL when creating or matching routes.

Finally, developers can also set QueryParamsHandling to "empty" which will remove all query parameters from the URL when creating or matching routes.

QueryParamsHandling Default

Angular provides a built-in way to handle query parameters in our applications. By default, when we use the router to navigate to a new page, any query parameters will be retained.

This is often the behavior we want, as it allows us to maintain state across page reloads and transitions. 

However, there are times when we may want to disregard or reset query parameters upon navigation.

QueryParamsHandling default example:
TypeScript
 
import { Component, Input } from "@angular/core";

@Component({
  selector: "hello",
  template: `
    <h1>Default component</h1>

    <button k1:="" queryparams="" routerlink="/a/123" v1="">
      go to a/123
    </button>
  `,
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `
  ]
})
export class DefaultComponent {}


Check the example on stackblitz.

QueryParamsHandling merge 

QueryParamsHandling merge is a new feature in angular that allows for better management of query parameters in routing. This feature can be used to simplify the management of query parameters in your application.

QueryParamsHandling merge can be used to automatically merge query parameters from a parent route into a child route. This can be useful when you want to inherit query parameters from a parent route, but also add additional query parameters to the child route.

QueryParamsHandling merge example:
TypeScript
 
import { Component, Input } from '@angular/core';

@Component({
  selector: 'a',
  template: `
    >router-outlet<>/router-outlet<
    >button k2:="" queryparams="" queryparamshandling="merge" routerlink="b" v2=""<
      Go to b with queryParamsHandling='merge'
    >/button<
    >br /<
  `,
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `,
  ],
})
export class AComponent {
  @Input() name: string;

  constructor() {
    console.warn('[AComponent] initialised');
  }
}


Check this example on stackblitz

QueryParamsHandling preserve

When creating an Angular application, the default behavior is for the router to create a new instance of a component when it navigates. This is fine for most cases, but there are times when you need to preserve a component's state across navigations.

This can be accomplished by using the QueryParamsHandling option in the router configuration.

QueryParamsHandling Preserve is useful for things like pagination, where you want to maintain the current page number across navigations. It's also useful for keeping form input values when moving between components.

There are some drawbacks to using QueryParamsHandlingPreserve though. One is that it can cause issues with browser history.

Another is that it can make your application more difficult to test and debug. Overall, it's best used sparingly and only when absolutely necessary.

QueryParamsHandling preserve example:

TypeScript
 
import { Component, Input } from '@angular/core';

@Component({
  selector: 'a',
  template: `
    <router-outlet></router-outlet>

    <button [queryParams]="{ k2: 'v2' }" routerLink="b">
      go to b with queryParamsHandling='preserve'
    </button>
    <br />
  `,
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `,
  ],
})
export class AComponent {
  @Input() name: string;

  constructor() {
   
  }
}


Check this exmaple on stackblitz.

Summary

QueryParamsHandling is a great way to use Angular to manage parameters in your URL. By using this method, you can easily add, remove, and edit parameters in your URL. 

This makes it easy to keep track of your parameters and make sure that they are always up to date.

There are many advantages to using queryParamsHandling in Angular. It can help you manage your URL parameters more efficiently, and it can also make your code more readable.

Additionally, queryParamsHandling can help you avoid potential errors in your code.

IT AngularJS

Published at DZone with permission of Akash Chauhan. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Building Microservice in Golang
  • 5 Steps for Getting Started in Deep Learning
  • Stop Using Spring Profiles Per Environment
  • mTLS Everywere

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: