Dynamic routerLink value from ngFor item giving error "Got interpolation ({{}}) where expression was expected"

You can't use [] combined with {{}} either the former or the later

[routerLink]="item.routerLink"

Should do what you want.

routerLink="{{item.routerLink}}"

would bind item.routerLink.toString() to the routerLink property.


You may also go with the following code to pass expression with some text.

<div *ngFor="let customer of customers">
   <a [routerLink]="'customer/'+customer.index">Link</a>
</div>

Something like this worked for us:

<input type="checkbox" [id]="['btn.botStepState-'+i]" [(ngModel)]="btn.botStepState" name="btn.botStepState-{{i}}" (change)="changeHandler($event)" class="cbx hidden" />
  • Property binding i.e. [] required [] to evaluate values
  • Model binding i.e. [()] required nothing special
  • Interpolation i.e. {{}} could be used with general attributes
  • Event binding i.e. () worked great with functions