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 *

Answer 1

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>