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>
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.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.