Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

ng if with ngfor in angular

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 :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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

>Solution :

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>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading