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?

score 51 · Accepted Answer · edited Dec 17 '17 at 22:50

51

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>.

edited Dec 17 '17 at 22:50

Mark Amery

143,130
81
406
459

answered Jun 21 '16 at 15:26

Günter Zöchbauer

623,577
216
2,003
1,567

10

Once difference when using `[attr.href]` vs `[href]` is that the former will not bind if the value is null- this came in handy for me, since I wanted the anchor to be disabled if a url property I was binding wasn't set. – spongessuck Jan 14 '17 at 20:34
it gives me link like this. "localhost:4200/mywebsite.com". How can I handle this ? – Muhammad Ahsan Mar 26 '19 at 11:52
What's wrong with that? What is the expected value? – Günter Zöchbauer Mar 26 '19 at 11:54

score 12 · Answer 2 · edited Dec 17 '17 at 23:12

12

Well you can bind it with string interpolation:

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

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

edited Dec 17 '17 at 23:12

Mark Amery

143,130
81
406
459

answered Jun 21 '16 at 15:26

Maximilian Riegler

22,720
4
62
71

1

This doedsn't work for me: `` – chovy Jun 16 '18 at 19:19
3

@chovy You shouldn't mix attribute and object binding. Just remove those curly brackets arround your `address`. – Maximilian Riegler Jun 17 '18 at 16:16

score 1 · Answer 3 · answered Oct 08 '18 at 21:31

1

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

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

answered Oct 08 '18 at 21:31

Gh111

1,362
18
19

Set href in attribute directive in Angular

3 Answers3

Linked