CODEWITHSUNDEEP
angularangular-materialrouterlink
Alexandre Saison
Alexandre Saison

Reputation: 3

routerLink not working inside ngFor

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

Upvotes: 0

Views: 2386

Answers (2)

bryan60
bryan60

Reputation: 29355

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.

Upvotes: 1

komron
komron

Reputation: 2277

Try creating a method 

getRouerLink(link) {
  return [link];
}

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

Upvotes: 0

Related Questions