How to Update URL Without Refresh in Angular: Updating Query Parameter Values

One of the challenges we often face when working with Angular is to update the URL without refreshing the page. This is especially important when dealing with query parameters, as you may want to change their values without causing a full page refresh.

In this article, we will explore how to update the URL and query parameters without refreshing the page in Angular applications.

 

How to update URL Without Refresh

Follow these steps to update the query params values in the URL without page refresh:

Step 1 – App Setup
Step 2 – Update the Function
Step 3 – Code Snippet

 

Step 1 – App Setup

First, let’s set up a simple Angular application with a basic routing configuration:

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
];

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

 

app.component.html

<router-outlet></router-outlet>

 

Step 2 – Update Function

Now, let’s create a function called updateQueryParameter() in the HomeComponent:

home.component.ts

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent {
  constructor(private router: Router, private route: ActivatedRoute) { }

  updateQueryParameter(newParamValue: string): void {
    this.router.navigate([], {
      queryParams: { exampleParam: newParamValue },
      queryParamsHandling: 'merge',
    });
  }
}

What is queryParamsHandling ?

In the NavigationExtras object, there is a property called queryParamsHandling. This property allows us to control how the router merges the current query parameters with the new ones during navigation. There are three options:

  1. ‘merge’: Merge the current query parameters with the new ones.
  2. ‘preserve’: Preserve the current query parameters.
  3. undefined (default): Replace the current query parameters with the new ones.

 

Step 3 – Code Snippet

Here is the complete code snippet for the HomeComponent with the update function:

home.component.html

<button (click)="updateQueryParameter('newValue')">Update Query Parameter</button>

In this example, we created a function called updateQueryParameter() that takes a new query parameter value as an argument.

The function uses the Router.navigate() method to update the URL without refreshing the page. The queryParamsHandling property is set to ‘merge’, which means the current query parameters will be merged with the new ones.

When the user clicks the “Update Query Parameter” button, the updateQueryParameter() function is called with the new value for the exampleParam query parameter. The URL in the browser’s address bar will be updated with the new query parameter value, without causing a full page refresh.

 

FAQs

 

1 – How do I update the URL without refreshing the page in Angular?

To update the URL without refreshing the page, you can use the Router.navigate() method, which allows you to navigate to a specified route and update the URL in the browser’s address bar without causing a full page refresh.

 

2 – How do I update query parameters in Angular?

To update query parameters, you can use the ActivatedRoute class to access the current route information, including query parameters. You can then modify the query parameters using the Router.navigate() method and the queryParamsHandling property.

 

3 – What is the queryParamsHandling property?

The queryParamsHandling property is part of the NavigationExtras object and allows you to control how the router merges the current query parameters with the new ones during navigation. There are three options: ‘merge’, ‘preserve’, and undefined (default).

 

4 – Can I update multiple query parameters at once?

Yes, you can update multiple query parameters at once

 

Conclusion

In this article, we have covered how to update the URL and query parameter values without refreshing the page in Angular applications.

By utilizing the Angular Router and ActivatedRoute, we can create dynamic, single-page applications with seamless navigation and user experience.

Leave a Comment

Your email address will not be published. Required fields are marked *