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

Solution

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.