Dynamic routerLink value from ngFor item giving error "Got interpolation ({{}}) where expression was expected"
AngularAngular2 DirectivesAngular Problem Overview
I'm trying to set the routerLink
value in a directive based on a dynamic set of items from the component. But an error is being thrown from Angular2:
EXCEPTION: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 1 in [ {{item.routerLink}} ] in AppHeader@5:40 ("
<a *ngFor="let item of headerItems" [ERROR ->][routerLink]=" {{item.routerLink}} ">
{{item.text}}
</a>
"): Header@5:40
header.component.ts
import {Component} from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router-deprecated';
@Component({
selector: 'app-header',
templateUrl: './app/components/header/header.component.html',
directives: [ROUTER_DIRECTIVES]
})
export class AppHeader {
headerItems: Object[] = [];
constructor() {
this.headerItems.push(
{ classes: 'navLink', routerLink: ['/Home'], text: 'Home' }
);
}
}
header.component.html
<div id="HeaderRegion">
<nav class="nav">
<a *ngFor="let item of headerItems" [routerLink]=" {{item.routerLink}} ">
{{item.text}}
</a>
</nav>
</div>
Angular Solutions
Solution 1 - Angular
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.
Solution 2 - Angular
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>
Solution 3 - Angular
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
Solution 4 - Angular
You could have found the answer by this time, for me removing {{}} resolved the similar issue. Your code could be
<a *ngFor="let item of headerItems" [routerLink]="item.routerLink">
{{item.text}}
</a>
Solution 5 - Angular
if you want to create router link by getting dynamic value from ngFor , you can do using below example
<div *ngFor = "let item of items">
<a [routerLink] = "['./item-details/' + item.id]">{{item.name}}</a></div>
that is , simply append the value you receive to the url you want to navigate.
Solution 6 - Angular
I have an example of how to make your routes dynamic
in your html component
<ul class="nav side-menu">
<li *ngFor="let data of dataPermiso;let i= index">
<a><i class="{{data.icono}}"></i> {{data.categoria}} <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li *ngFor="let item of data.permisoList;let a = index">
<a [routerLink]="item.ruta">{{item.titulo}}</a>
</li>
</ul>
</li>
</ul>
in your component ts
public dataPermiso:any[] = [];
constructor(private loginserv: LoginService) {
this.loadPermiso();
}
ngOnInit() {
}
public loadPermiso(){
this.loginserv.listPermisos(this.dataStorage.idrol).subscribe((data)=>{
this.dataPermiso= data;
});
}