ng if with ngfor in angular

Question

I'm trying to display data in cdkDroplist for drag drop purposes

<div cdkDropList #todoList="cdkDropList" [cdkDropListData]="lists[0].answers" [cdkDropListConnectedTo]="[doneList]" class="example-list" (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let item of lists[0].answers"  *ngIf="item" cdkDrag>{{item}}</div>
    </div>

i want to hide this div when item contains blank on null values

 <div class="example-box" *ngFor="let item of lists[0].answers"  *ngIf="item" cdkDrag>{{item}}</div></div>

for that i used *ngIf="item" but this is showing this error :

Can't have multiple template bindings on one element. Use only one attribute prefixed with *

see if this helps you https://stackoverflow.com/a/43846773/2460773 — Nitsan Baleli, Apr 03 '22 at 07:26
@NitsanBaleli Thanks but `item` variable is accessible only inside for loop then how will i create outer div and get `item` variable access — user3653474, Apr 03 '22 at 07:31

score 0 · Accepted Answer · answered Apr 03 '22 at 07:31

what you can do is wrap the for in a ng-container its a elemant that will not be shown in the dom

<div cdkDropList #todoList="cdkDropList" [cdkDropListData]="lists[0].answers" [cdkDropListConnectedTo]="[doneList]" class="example-list" (cdkDropListDropped)="drop($event)">
   <ng-container *ngFor="let item of lists[0].answers" >
       <div class="example-box"  *ngIf="item" cdkDrag>{{item}}</div>
    </ng-container>
</div>

ng if with ngfor in angular

1 Answers1