CODEWITHSUNDEEP
angularangular-routing
AlejoDev
AlejoDev

Reputation: 3252

Query Params Not Works Angular 5

I have the following Html component:

<a [routerLink]="['experts']" [queryParams]="{profession:handyman}" class="category">
            <img src="../../assets/metal-saw.svg" width="60" height="60">
            <span>HandyMan</span>
        </a>

The problem is that when I click on the link, the experts route takes me, but without the queryparams. That is, queryparams does not seem to work but routerLink if it does. I am using angular in its version 5. Does anyone know why this happens?

Upvotes: 0

Views: 63

Answers (2)

Anuradha Gunasekara
Anuradha Gunasekara

Reputation: 6983

Try this:

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

 //

constructor(private router: Router) {}

public navigate(): void {
      let navigationExtras: NavigationExtras = {
          queryParams: {'profession':handyman}
    };

    this.router.navigate(['/experts'], navigationExtras);
}

And in your HTML:

<a (click)="navigate()" class="category">
            <img src="../../assets/metal-saw.svg" width="60" height="60">
            <span>HandyMan</span>
        </a>

And go through this answer for more details. And follow the official doc for Angular routing.

Upvotes: -1

Sajeetharan
Sajeetharan

Reputation: 222522

Try this,

<a [routerLink]="['/experts']" [queryParams]="{ profession: 'handyman'}" class="category">

Upvotes: 2

Related Questions