ngx-query-params

ngx-query-param is an Angular library that simplifies the manipulation of query parameters in the URL. It provides methods to add, delete, append, and check query parameters, making it easier to manage the URL's query string in your Angular applications.

Installation

You can install ngx-query-params using npm:

npm install ngx-query-params --save

Import the service in your module providers

import { NgxQueryParamService } from 'ngx-query-params';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [NgxQueryParamService],
  bootstrap: [AppComponent]
})
export class AppModule { }

API Reference

Adds multiple query parameters to the URL. Accepts an object of parameter-value pairs.

addMultipleParamsInURL(params: object): void

Adds a single query parameter to the URL.

addParamInURL(param: string, value: string): void

Appends a query parameter to the existing URL's query string.

appendParamInURL(param: string, value: string): void

Removes query parameter from the URL.

removeParamFromURL(param: string): void

Returns an object containing all query parameters present in the URL.

getAllParamsFromURL(): string[]

Returns the value of a specific query parameter from the URL.

getParamFromURL(param: string): string

Checks if a specific query parameter exists in the URL.

hasParamInURL(param: string): boolean

Example of usage

import { Component, OnInit } from '@angular/core';
import { NgxQueryParamService } from 'ngx-query-params';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {
  
  constructor(private readonly ngxQueryParamService: NgxQueryParamService) {}

  ngOnInit(): void {

    const queryParams = {
      param1: 'value1',
      param2: 'value2',
    };

    this.ngxQueryParamService.addMultipleParamsInURL(queryParams);

    this.ngxQueryParamService.addParamInURL('param', 'value');

    this.ngxQueryParamService.appendParamInURL('param', 'value');

    this.ngxQueryParamService.removeParamFromURL('param');

    const allParams = this.ngxQueryParamService.getAllParamsFromURL('param');

    const paramFromURL = this.ngxQueryParamService.getParamFromURL('param');

    const hasParam = this.ngxQueryParamService.hasParamInURL('param');
  }
}