Ordering of custom item in *ngFor directive

Question

This is my code:

    <nav>
        <a [routerLink]="item.link"
            *ngFor="let item of links; let lastItem = last;"  
            *ngIf="!lastItem">
            {{item.title}}
        </a>
        <a (click)="clickOnCustomLink()">
            MY CUSTOM LINK
        </a>
        <a *ngIf="links" [routerLink]="links[links.length - 1].link">
            {{links[links.length - 1].title}}
        </a>
    </nav>

For known reasons I get an error:

Can't have multiple template bindings on one element

Any ideas?

Duplicate? https://stackoverflow.com/questions/34657821/ngif-and-ngfor-on-same-element-causing-error — Aragorn, Dec 04 '18 at 15:33

Ashish Ranjan · Accepted Answer · 2018-12-04T15:39:55.717

4

Yes you can't use more than one structural directive on one angular element

Instead use ng-container for running the for loop (ng-containers are not rendered in your DOM) :

<ng-container *ngFor="let item of links; let lastItem = last;"  >
    <a [routerLink]="item.link" *ngIf="!lastItem">
        {{item.title}}
    </a>
<ng-container>

edited Dec 04 '18 at 15:39

answered Dec 04 '18 at 15:32

Ashish Ranjan

12,760
5
27
51

1

You just need to swap the directives ;) – pzaenger Dec 04 '18 at 15:34

score 2 · Answer 2 · answered Dec 04 '18 at 15:33

cant add two structural directives on one element. Create a new ng-container and move the ngFor into that one

   <ng-container [routerLink]="item.link" *ngFor="let item of links; let lastItem = last;" >
        <a [routerLink]="item.link" *ngIf="!lastItem">
               {{item.title}}
         </a> 
    </ng-container>

Ordering of custom item in *ngFor directive

2 Answers2