[Angular] Removing Query Params from the URL – 4 Methods

In Angular applications, the query parameters are often appended to the URL to pass data between routes and components. These query parameters can be used for pagination, sorting, filtering, session management like direct login and more.

Sometimes, we may also want to remove these query parameters from the URL due to various reasons for example:

• Resetting state after navigation
• Reloading a route to clear query params
• Removing sensitive data like IDs or tokens
• Cleaning up the URL for bookmarking
• Resetting filters or searches

[lwptoc]

In this detailed article, we will discuss various methods to remove query parameters from the URL in Angular. By the end, you will understand how to use the Router, Location service, and other APIs to clear out query strings programmatically.

 

When to Remove Query Params

In our application, based on various use cases or business behaviours, we may want to remove query params from the Angular application URL:

• After navigating to reset state on another route. For example, removing pagination, sorting or filter params.
• On route reload to clear any existing query data.
• Removing sensitive data like tokens that should not persist in the URL.
• Cleaning the URL for bookmarking or sharing pages.
• Redirecting to a canonical URL without query strings.

Or any other situation where you are looking to remove temporary, sensitive, or unnecessary data from the URL, you will need to clean those query params.

 

How to Remove Query params from URL in Angular?

Now, we will walk through the following methods with examples on how to remove the URL query params:

1. Using Router.navigate()

2. Using Router.navigateByUrl()

3. Using Angular Location Strategies

4. Using ActivatedRoute Snapshot

Let’s discuss these methods in detailed with easy-to-understand practical examples:

 

1. Using Router.navigate()

One of the simplest ways to remove query parameters is by using Angular’s Router.navigate() method. Here we will discuss the following use cases:

Remove All Query params from the URL

Suppose our current URL is https://example.com/products?page=2&category=electronics&sort=price and we want to remove all the query params on navigation. Then we will just call the router.navigate() by passing the route path as shown below:

// component.ts

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

//...

constructor(private router: Router) {}

resetParams() {
  this.router.navigate(['products']); 
}

This will navigate to the /products path and remove all existing query parameters. Here we just passed a relative path without the query strings that we want to delete.

 

Remove Specific Query Params from URL

We can also pass navigation extras to remove only specific query parameters. Suppose we want to remove only the page and category and keep other parameters as it is in the URL. Then we can add the queryParams key and pass the params with null. Most important is adding the queryParamsHandling key as 'merge'

// Remove 'page' & 'category' param but keep others

this.router.navigate(['products'], {
  queryParams: { page: null, category: null}, 
  queryParamsHandling: 'merge'
});

This will allow us to give more control when we only want to clear some query parameters but preserve others.

 

2. Using Router.navigateByUrl()

Now, we will discuss how to use Router.navigateByUrl method to remove all the query params or selected query params from the URL.

 

Remove All Query params from the URL

We can simply call the navigateByUrl add passing the full URL s shown below:

this.router.navigateByUrl('/products');

This navigates to the /products URL by removing any of the query params. We can also pass the {skipLocationChange: true} option to update the URL without changing the location:

this.router.navigateByUrl('/products', {skipLocationChange: true});

This can be useful for updating the URL to remove query parameters without a full navigation.

The key difference from router.navigate() is that navigateByUrl() takes a complete URL string instead of a router path. But both methods can remove query parameters by navigating to a path without params attached.

 

Remove Selected Query Params from the URL

By using the navigateByUrl() we can also keep only selected params and remove other non-required query params. For example, if need to keep only the sort query param then we can do that by calling navigateByUrl() as below:

// Current URL 
https://example.com/products?page=2&category=electronics&sort=price

// Keep 'sort' param, remove 'page' and 'category'
this.router.navigateByUrl('/products?sort=price'); 

// Result URL
https://example.com/products?sort=price

 

3. Using Angular Location Strategies

Another approach to control query params in URL is by using Angular’s Location service to manipulate the browser URL directly.

First, import the Location service from angular/common and define it in the constructor:

import { Location } from '@angular/common';

constructor(private location: Location) {}

 

Remove All Query params from the URL

Then we can use location.replaceState() to update the URL to a path without query params:

// Replace URL state without reloading
this.location.replaceState('/products');

This will replace the current history state with the /products URL and remove any query strings. We can also use location.go() to navigate the history stack to a new URL:

// Navigate history stack
this.location.go('/products');

The main difference between these Location methods and Router.navigate() is that Location directly interacts with the browser URL without routing or navigating.

But, under the hood, the Router uses the Location service to update the URL after navigating. Whereas we are calling its methods directly, which is also acceptable.

 

Remove Selected Query Params from the URL

Similarly, if we want to remove only selected query params, we can call them as shown below:

import { Location } from '@angular/common';

constructor(private location: Location) {}

// Remove page and category params
this.location.replaceState('/products?sort=price');

 

4. Using ActivatedRoute Snapshot

We can also use the ActivatedRoute to access the current snapshot of route parameters with Router for navigation.

 

Remove All Query params from the URL

Let’s check the following example of how to use the ActivatedRoute snapshot to remove all query parameters from the URL in Angular:

// component.ts

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

constructor(
  private route: ActivatedRoute,
  private router: Router
) {}

removeAllQueryParams() {

  // Get current query params from snapshot
  const currentParams = this.route.snapshot.queryParams;
  
  // Construct new queryParams object with all params set to null
  const newParams = Object.keys(currentParams).reduce((params, key) => {
    return {
      ...params,
      [key]: null
    };
  }, {});

  // Navigate with new params object to remove all existing query params
  this.router.navigate([], { 
    queryParams: newParams
  });

}

Here we are constructing a new queryParams object, and setting each existing param to null. Then calling the navigate() method for navigation.

 

Remove Selected Query Params from the URL

For selected removal of query params, get the queryParams from the snapshot:

// Get current query params
const params = this.route.snapshot.queryParams;

Then construct a new queryParams object while removing unwanted values:

// Remove 'page' and 'category' param
const newParams = {
  ...params,
  page: null,
  category: null 
};

this.router.navigate([], {queryParams: newParams});

This way you can keep some existing query params while removing others programmatically.

 

Conclusion

We have discussed key ways to remove query parameters from the URL in Angular by deploying various APIs and their methods:

Router.navigate() – Programmatically navigate to a relative path without query params

Router.navigateByUrl() – Similar to above but accepts a full URL string

Location.replaceState() – Replace the current URL state without reloading

Location.go() – Navigate URL history stack to the path

ActivatedRoute.snapshot – Get current params and filter out unwanted values

We discussed how to remove all or selected query parameters with examples. By using these methods you can easily control the URLs by handling these API methods on callbacks or programmatically handled operations.