How to pass query parameters with a routerLink ?

The task is to pass query parameters with a routerLink, for that we can use the property binding concept to reach the goal. Using property binding, we can bind queryParams property and can provide the required details in the object.

What is Property Binding?

It is a concept where we use square bracket notation to bind data to Document Object Model(DOM) properties of Hypertext markup language(HTML) elements.

Syntax:

<a [routerLink]="[/path]" [queryParams]="{property:value}">
   State Details 
</a>
 

An Example of property binding:



Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

import { Component, OnInit } from '@angular/core'
  
@Component({
  
    selector: 'app-property',
    template:
        // Property Binding 
        `<p [textContent]="title"></p>`
})
  
export class AppComponent implements OnInit {
  
    constructor() { }
    ngOnInit() { }
  
    title = 'Property Binding example in GeeksforGeeks';
  
}

chevron_right


Output:

Illustration of above code

Approach:

  • First, configure the routes in app.module.ts
  • Implement query params with required values in the HTML file.
  • Then in .ts file, in ngOnit try to access the query params using the activated Route by importing it  from ‘angular@router’
  • Once you are able to access them try to render them by using either string interpolation syntax or property binding syntax in HTML file.

Below is the implementation of the above steps:

app.module.ts:

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

import { NgModule } from '@angular/core';
import { BrowserModule } from 
            '@angular/platform-browser';
  
// Importing Routes
import { RouterModule, Routes } 
        from '@angular/router';
  
import { AppComponent } from 
            './app.component';
  
import { StateComponent } from 
        './state/state.component';
  
// Configuring Routes
const routes: Routes = [{ 
    path: 'punjab'
    component: StateComponent 
},];
  
@NgModule({
    imports: [BrowserModule, R
        outerModule.forRoot(routes)],
          
    declarations: [AppComponent, 
        StateComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

chevron_right


app.component.html:

HTML



filter_none

edit
close

play_arrow

link
brightness_4
code

<a [routerLink]="['/punjab']" [queryParams]=
    "{capital:'mohali',language:'punjabi'}">
    State Details
</a>
<router-outlet></router-outlet>

chevron_right


After clicking on the anchor tag the URL will be displayed in the following way:

We can also access the query parameters using the activated route.

In this way, we can pass query parameters via routerLink.

Fetching of query parameters:

state.component.ts :

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
  
@Component({
  selector: 'app-state',
  templateUrl: './state.component.html',
  styleUrls: ['./state.component.css']
})
export class StateComponent implements OnInit {
  
  capital: string;
  language:string;
  
  constructor(private route: ActivatedRoute) { }
  
  ngOnInit() {
    this.route.queryParams.subscribe(
      params => {
        this.capital =  params['capital'];
        this.language=params['language'];
      }
    )
  }
  
}

chevron_right


state.component.html:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

State Details are : 
  
<p>Capital  : {{capital}} </p>
  
<p>Language : {{language}} </p>

chevron_right


Output:

  • Before Click the Button:

  • After Click the Button: Hence query parameters passed can be seen

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.