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
– N.Y, Commented May 7, 2019 at 10:11
I'd use a "pipe" which can transform each of your items. Take a look at this link. — ViqMontana
– ViqMontana, Commented May 7, 2019 at 10:26
Sorry , I used it but I writed it wrong . It works now ! Thank you ! — N.Y
– N.Y, Commented May 7, 2019 at 10:47

Sajeetharan · Accepted Answer · 2019-05-07 09:53:12Z

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 7, 2019 at 9:53

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Majutharan Majutharan · Accepted Answer · 2019-05-07 09:58:23Z

1

remove the single quotes

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

answered May 7, 2019 at 9:58

Majutharan Majutharan

2811 silver badge13 bronze badges

Comments

Krishna Rathore · Accepted Answer · 2019-05-07 10:11:06Z

0

Remove the single quotes and href="#"

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

answered May 7, 2019 at 10:11

Krishna Rathore

9,7375 gold badges28 silver badges50 bronze badges

Comments

Denuka · Accepted Answer · 2019-05-07 10:57:35Z

0

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>

answered May 7, 2019 at 10:57

Denuka

1,2623 gold badges14 silver badges24 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related