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 # infront of the href expression. So this template compiles but isn't what I want:

<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> </ul> 

What I want to do is [attr.href]="#aType.Name" but that blows up. What is the correct syntax to prepend the # in front of the expression in the attribute directive?

Answer 1

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 2

Well you can bind it with string interpolation:

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

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