How to pass variable query parameters with a routerLink in Angular 5

Question

Within an *ngFor loop, where I'm building a list of search results (mat cards) with sample reading texts, I want to allow the user to click on one of them to read more, and open a route to a document template populated with the right doc.

This static HTML works with routerlinkactive catching the params in the docview page...

<button mat-button [routerLink]="['/docview', {sDocName: 'AW010001'}]">READ MORE...</button>

I want to replace the hardcoded Doc ID 'AW010001' with the appropriate ID for each iteration through the *ngFor. But this code fails...

<button mat-button [routerLink]="['/docview', {sDocName: '{{sDocIDs[i]}}'}]">READ MORE...</button>

The error I get is the typical...

Parser Error: Got interpolation ({{}}) where expression was expected at column 25 in [['/docview', {[sDocName]:'{{sDocIDs[i]}}' }]]

score 5 · Answer 1 · answered Apr 05 '18 at 20:28

5

Check out Angular 5-Routing (Practical Guide)

To high-light the main points:

Update the route table:

{ path: 'book/:id', component: BookDetailsComponent, }

Use this format:

<a [routerLink]="['/book',b.Id]">Details</a>

So in your example I think it should look like this: <button mat-button [routerLink]="['/docview', sDocIDs[i]">READ MORE...</button>

answered Apr 05 '18 at 20:28

Papa Stahl

687
8
7

2

This is not a query param approach but a routerlink parameter which is different. – Youp Bernoulli Sep 18 '19 at 09:32

score 0 · Answer 2 · answered Jan 17 '18 at 23:25

0

With ngFor loop i guess that you only need something like this : routerLink="/docview/{{sDocName.sDocIDs}}" + proper function in component Go to angular.io, example is shown in tutorial

answered Jan 17 '18 at 23:25

Ralph

23
1
5

Doesn't seem to work. First, I would need [i] after sDocIDs[i] to pick up the right indexed variable for this loop. So I attempted your example with that one change and received..."TypeError: _co.sDocName is undefined", which is interesting because before when it was separated by the : it didn't throw that error. Here is exactly what i put to match your suggestion... routerLink="/docview/{{sDocName.sDocIDs[i]}}" – AppDreamer Jan 18 '18 at 00:11

score 0 · Accepted Answer · answered Feb 15 '18 at 22:22

Actually... I ended up moving the routerLink functionality into a function in my .ts file for that component...

  readMore(sDoc: string) {
    this.router.navigate(['/docview', {sDocName: sDoc}]);
    window.scrollTo(0, 0);
  }

Then in my HTML, I use a variable that is associated with all the other story metadata... in this case I used an array for development, but will eventually replace that array variable with an element of a data model for the stories.

<button mat-raised-button (click)="readMore(DocIDs[i])">READ MORE...</button>

This is working well for me.

How to pass variable query parameters with a routerLink in Angular 5

3 Answers3