How to give dynamics values for [routerLink] which it corresponds to values of an array?

Question

I want to make a dynamic routing into my template. Values of routing come from an array which is iterated with ngFor. Also I want to make some transformations to this values which are of type string. Thanks

I tried to put values from an array but it gives me this error : Error: Cannot match any routes. URL Segment: 'items.label' Error: Cannot match any routes. URL Segment: 'items.label'

<li *ngFor = "let items of this.labelsMenu|async">
    <a[routerLink]="['items.label'] " href="#" >
</li>

Thank you, but how can I transfom the value of items.label to put it lowercase ? — N.Y, May 07 '19 at 10:11
I'd use a "pipe" which can transform each of your items. Take a look at [this](https://angular.io/api/common/LowerCasePipe) link. — ViqMontana, May 07 '19 at 10:26
Sorry , I used it but I writed it wrong . It works now ! Thank you ! — N.Y, May 07 '19 at 10:47

score 2 · Answer 1 · answered May 07 '19 at 09:53

2

It should be without the quotes in 'items.label'

<li *ngFor = "let items of this.labelsMenu|async">
    <a[routerLink]="[items.label] " href="#" >
</li>

answered May 07 '19 at 09:53

Sajeetharan

216,225
63
350
396

score 1 · Answer 2 · answered May 07 '19 at 09:58

1

remove the single quotes

 <li *ngFor = "let items of this.labelsMenu|async">
        <a[routerLink]="[items.label]" href="#" >
    </li>

answered May 07 '19 at 09:58

Majutharan Majutharan

271
1
13

score 0 · Answer 3 · answered May 07 '19 at 10:11

0

Remove the single quotes and href="#"

<li *ngFor = "let items of this.labelsMenu|async">
    <a [routerLink]="['items.label']">
</li>

answered May 07 '19 at 10:11

Krishna Rathore

9,389
5
24
48

score 0 · Answer 4 · answered May 07 '19 at 10:57

You just need to remove single quotationsand href='#'. Hope you wanted to put href because of hover mouse pointer. For that you can add a style in your tag as given style="cursor: pointer".

<li *ngFor = "let items of this.labelsMenu|async">
    <a[routerLink]="[items.label]" style="cursor: pointer">
</li>

How to give dynamics values for [routerLink] which it corresponds to values of an array?

4 Answers4