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

Question

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>

just had the issue, if solutions above give Can't bind to 'routerLink' since it isn't a known property of 'a'. and if your template is inside a custom module (like I did), dont forget to import RouterModule in your module too :-P — ninja, May 03 '17 at 12:57

score 125 · Accepted Answer · edited Apr 18 '18 at 13:57

125

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.

edited Apr 18 '18 at 13:57

Rap

6,851
3
50
88

answered May 06 '16 at 17:47

Günter Zöchbauer

623,577
216
2,003
1,567

To get this to work I had to change headerItems to " routerLink: '/Home' " and add the brackets [ ] in the ngFor loop, link this [routerLink]: "[item.routerLink]" – kbjerring Aug 18 '16 at 09:22
The brackets around the path shouldn't be necessary. Are you using the newest version of Angular2 and the router? – Günter Zöchbauer Aug 18 '16 at 09:25
Sorry, no idea. RouterLink supports both, an array of router commands, or a path as string. – Günter Zöchbauer Aug 19 '16 at 09:49
it's worked for me when to us `routerLink="{{item.name}}"` – Brijesh Mavani Jan 23 '18 at 06:39

score 17 · Answer 2 · edited Jan 17 '19 at 02:49

17

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>

edited Jan 17 '19 at 02:49

Pang

9,564
146
81
122

answered Mar 28 '18 at 13:42

Manish Gupta

276
2
5

score 5 · Answer 3 · answered Jan 03 '17 at 15:47

5

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>

answered Jan 03 '17 at 15:47

madhav bitra

155
1
3

score 5 · Answer 4 · answered Jun 22 '17 at 08:28

5

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

answered Jun 22 '17 at 08:28

Zameer Ansari

28,977
24
140
219

I fail to se how this is helpful, nothing in here is is related to the question outside of what a property binding is. – dudewad Apr 01 '18 at 21:48
@dudewad in my example, I'm showing how to use the synatx in general which applies to the question as well - so that the asker can take help from it. – Zameer Ansari Aug 23 '18 at 16:43

score 2 · Answer 5 · answered Jul 28 '20 at 06:45

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.

score 0 · Answer 6 · answered Apr 21 '19 at 18:58

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;
    });
  }

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

6 Answers6

Linked