50

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>
1
  • 1
    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
    Commented May 3, 2017 at 12:57

6 Answers 6

127

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.

5
  • 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
    Commented Aug 18, 2016 at 9:22
  • The brackets around the path shouldn't be necessary. Are you using the newest version of Angular2 and the router? Commented Aug 18, 2016 at 9:25
  • Sorry, no idea. RouterLink supports both, an array of router commands, or a path as string. Commented Aug 19, 2016 at 9:49
  • it's worked for me when to us routerLink="{{item.name}}"
    – B Kansara
    Commented Jan 23, 2018 at 6:39
  • In case you are appending for input string prop routerLink="/someurl/{{callMethodTogetDinamicString(someprop.prop1)}}" Commented Oct 23, 2023 at 10:19
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>
0
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>
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
2
  • 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
    Commented Apr 1, 2018 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.
    – Xameer
    Commented Aug 23, 2018 at 16:43
2

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.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.