CODEWITHSUNDEEP
htmlangularangular-ng-if
NrJ
NrJ

Reputation: 105

Angular 8 ngIf creates empty element when false

I have a problem with Anguar8 and ngIf:

I have a code that creates div which loads some images and their details to a page from a json with conditon:

HTML Code:

        <div class="row" >
          <div class="col-md-2 col-6 col-sm-4" style="margin-bottom: 1em;" *ngFor="let item of product; let i=index"> <br>
            <div class="box" *ngIf="i>35">
              <img [src]="item.photo" alt="image slide" style="display: block; width: 100%;">
              <div class="text-center">
                <h6>{{item.name}}</h6>
                <h6>MRP : ₹ {{item.price}}</h6>                
              </div>
            </div>
          </div>
        </div>

The problem is, that angular creates an empty div with this comment in it:

<div _ngcontent-oio-c3="" class="col-md-2 col-6 col-sm-4" style="margin-bottom: 1em;"><br _ngcontent-oio-c3=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--></div>

Upvotes: 1

Views: 2400

Answers (2)

Nirmalya
Nirmalya

Reputation: 116

You may write *ngFor="let item of product | slice:0:35;". Reference https://angular.io/api/common/SlicePipe

Upvotes: 1

Sadashiv Swamy
Sadashiv Swamy

Reputation: 1

There are two options: 1.You can filter the list using pipe to avoid 2.You can try this should not create any template

<div *ngIf="i>35; else noData">
	{{data}}
</div>
<ng-template #noData>
</ng-template>

Upvotes: 0

Related Questions