Set href in attribute directive in Angular

Question

I\'m trying to set up a Bootstrap tab strip with Angular 2. I have the tabs rendering in an ngFor but I\'m getting template errors when I try to put the

Answer 1

Why don't you use routerLink instead of href? I think, this will work

<a routerLink="#{{ aType.Name }}">Name<a>

Answer 2

There is no need to prefix with #

In this code

<ul class="nav nav-tabs" role="tablist">
  <li *ngFor="let aType of resourceTypes; let i = index"
      [ngClass]="{'active': i == 0}"
      role="presentation">
    <a [attr.href]="aType.Name"
       [attr.aria-controls]="aType.Name"
       role="tab"
       data-toggle="tab">
      {{aType.Name}}
    </a>
  </li>

aType already refers to the *ngFor variable.

If you want to prefix a literal # you can use

[attr.href]="'#' + aType.Name" 

There is also no need for attr. if the element actually has the property href which is the case with <a>.

Answer 3

Well you can bind it with string interpolation:

href = "#{{aType.Name}}" 

(Note that the attribute used here is href, not [attr.href].)