Add template reference variable attribute to element if first Angular

Question

I have a mega nav menu that is made by looping through a JSON response from server. I want to add a #first template reference variable to the first a tag. (This is so that I can access it from its parent component to add focus to that link if a user uses the keyboard to select that part of mega nav; to make it accessible.) Below isn't working. How do you do this?

  <li *ngFor="let item of subMenu.items; let itemIndex=index;">
    <a (click)="linkMegaClicked($event)"
      [routerLink]="item.url"
      [#first]="itemIndex == 0"
      [innerHtml]="item.link_text">
    </a>
  </li>

Lars Vanderheydt · Accepted Answer · 2020-10-16 23:22:21Z

0

I Don't think you can add this dynamically (you can't do this with directives either) so i'm afraid you'll need to create 2 html tags.

<li *ngFor="let item of subMenu.items; let i = index;">
  <a
    #first
    *ngIf="i === 0"
    [routerLink]="item.url"
    [innerHtml]="item.link_text"
    (click)="linkMegaClicked($event)">
  </a>

  <a
    *ngIf="i !== 0"
    [routerLink]="item.url"
    [innerHtml]="item.link_text"
    (click)="linkMegaClicked($event)">
  </a>
</li>

I'f there is a way i'm sure somebody will correct me but for what I know this will be the way.

answered Oct 16, 2020 at 23:22

Lars Vanderheydt

1067 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Owen Kelvin Over a year ago

Does this answer your question stackoverflow.com/questions/44440879/… ?

JWP Over a year ago

This is the same behavior for NgModel.

Lars Vanderheydt Over a year ago

@OwenKelvin, it's sort of the answer. The ViewChildren can work and could be OP's solution. But it's still not a conditional directive. Anyway, thanks for the link!

Rashmi Kumari · Accepted Answer · 2020-10-17 12:17:57Z

0

You will need to write condition to acheive this case. I prefer to use container and template to make code more readable. Instead of index you can check for first attr of ngFor.

<li *ngFor="let item of subMenu.items; first as isFirst">
  <ng-container *ngIf="isFirst; else otherItem">
    <a #first
       [routerLink]="item.url"
       [innerHtml]="item.link_text"
       (click)="linkMegaClicked($event)">
    </a>
  </ng-container>
  <ng-template #otherItem>
    <a *ngIf="i !== 0"
       [routerLink]="item.url"
       [innerHtml]="item.link_text"
       (click)="linkMegaClicked($event)">
    </a>
  </ng-template>
</li>

answered Oct 17, 2020 at 12:17

Rashmi Kumari

5305 silver badges16 bronze badges

Collectives™ on Stack Overflow

Add template reference variable attribute to element if first Angular

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related