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

angularjs angular5 routerlink routerlinkactive
AppDreamer picture AppDreamer · Jan 17, 2018 · Viewed 11.4k times · Source

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]}}' }]]

Answer

Papa Stahl picture Papa Stahl · Apr 5, 2018

Check out Angular 5-Routing (Practical Guide)

To high-light the main points:

  1. Update the route table:

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

  1. 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>

Related questions

Untyped function calls may not accept type arguments - Angular 5 http calls

I'm trying to fetch data from API using interface. Bellow is my temp interface export interface ITemp { id: number, name: string, age: number } And below is my HTTP service, where there is a fn getHomedetails, which calls an API. import {…

Read More
Implementing if else condition inside a mat-cell of a mat-table - Angular 5

I am trying to implement an if else condition inside a mat-cell of a mat-table in my angular application. But I am getting error from the console "ERROR Error: StaticInjectorError(AppModule)[NgIf -> TemplateRef]: " my code is <ng-container …

Read More
if else statement in AngularJS templates

I want to do a condition in an AngularJS template. I fetch a video list from the Youtube API. Some of the videos are in 16:9 ratio and some are in 4:3 ratio. I want to make a condition like this: if …

Read More