routerLink not working inside ngFor

Question

I'm facing this sweet issue since three days. Let start with this single HTML code that is making

<mat-list-item    *ngFor="let setting of SideBarLinks"
                   [ngStyle]="{'display': setting['_value'] === true ? 'block':'none'}"   routerLink="[{{setting.link}}]">
        <mat-icon mat-list-icon>{{setting['icon']}}</mat-icon>
        {{setting.name}}
 </mat-list-item>

the problem is that how many time i click on it, it makes nothing. I tried to automate the list in my side bar using a separated JSON linked to the application. I use AngularX for about a year and i kindly know that routerLink directive doesn't work on every component that exists. but when I use it as a Single Component (without the *ngFor)

Here is the image that may help you to understand

Try [routerLink]="setting.link" – abhijeetwebdev Oct 31 '17 at 16:58 — abhijeetwebdev, Oct 31 '17 at 16:58

bryan60 · Accepted Answer · 2017-10-31T17:04:47.823

1

proper syntax:

[routerLink]="[setting.link]">

without the [] means it's a value and you can use the {{ }} syntax to make it dynamic, with the brackets means it's an expression. Since you're using the routerLink array syntax, I'm assuming you need it, which means you need an expression.

edited Oct 31 '17 at 17:04

answered Oct 31 '17 at 16:59

bryan60

28,215
4
48
65

I tried your your answer, but as I thought i didn't work... when I inspect the component when the webapp is rendered the list item is displayed without the routerLink... It looks like the list item lost it routerLink attribute, and displayed like a non link item – Alexandre Saison Oct 31 '17 at 19:42
i don't think you understand how routerlinks work. They're not supposed to be on the element when you inspect it with dev tools. If you put together a plunkr I will gladly prove that this works and show you that you're going wrong elsewhere. Your statement that " i kindly know that routerLink directive doesn't work on every component that exists" tells me that you just don't know the inner workings of the angular router well enough, becuase it DOES work for every component that exists. – bryan60 Nov 01 '17 at 13:01
Wait,I just understood your question... You're trying to ACTUALLY make the material list item a link? Of course that doesn't work. Router links are only supported on anchors and buttons. You need to make an anchor tag. Duh. – bryan60 Nov 01 '17 at 13:07
Hell yeah ... sry if my question was awfully asked... I know that but in some strange way it works for single material list item for example my settings list item works , but it seems that is because it's outside of an ngFor – Alexandre Saison Nov 01 '17 at 13:13
it has nothing to do with ngFor, it's because you in this case you need an expression, and the true directive binding (with the brackets) isn't working because it's only supported on anchor tags and buttons, just put an anchor tag around the inner items and put the directive there. – bryan60 Nov 01 '17 at 13:17
i finally use the anchor tag idea, i had allready test it, i knew it will work, but i was wanted to get it work the same way that on the single mat-list-item – Alexandre Saison Nov 02 '17 at 09:27

score 0 · Answer 2 · answered Oct 31 '17 at 16:58

0

Try creating a method

getRouerLink(link) {
  return [link];
}

and then call it in your *ngFor like routerLink = "getRouterLink(setting.link)"

answered Oct 31 '17 at 16:58

komron

2,267
2
17
26

Thanks a lot I'll try this as soon as possible ! – Alexandre Saison Oct 31 '17 at 17:20
your answer like the other one is not working, looks like the component doesn't accept routerLink when displayed with *ngFor – Alexandre Saison Oct 31 '17 at 19:44
Then are you sure that 'setting' object has info/has correct info ? have you checked it? – komron Nov 01 '17 at 08:18
Yep i have even displayed it – Alexandre Saison Nov 01 '17 at 09:52
Is `setting` static? If not can you provide your component code ? – komron Nov 01 '17 at 10:45
not it's not here the [link](https://github.com/Rand-IA/MyEduSport/blob/RW-3_About/src/app/app.component.ts) of my github repo – Alexandre Saison Nov 01 '17 at 10:58
In your github it's still `routerLink="{{setting.link}}"`. Does it print {{setting.name}} correctly? – komron Nov 01 '17 at 11:06
Yes i changed like u told me but didn't git push – Alexandre Saison Nov 01 '17 at 11:51
`[routerLinkActive]="['active-route']` try adding this next to [routerLink], also in your github the [routerLink] is before the *ngFor, try putting it after ngFor. If that doesn't help try putting tag inside `mat-list-item` and add routerLink to that a tag – komron Nov 01 '17 at 13:38
well I will test it a come back after it – Alexandre Saison Nov 01 '17 at 13:46

routerLink not working inside ngFor

2 Answers2