angularngforclearfix

Add condition ngFor outside loop


I want to add a div with class clearfix but I need to add it outside the loop. Is any way to achieve that?

<div class="row">
   <div class="col-xs-12 col-md-3 item" *ngFor="let item of items; let i = index;">
        <div class="header">
            <img src="{{item.image}}" *ngIf="!!item.image">
            <h4>{{item.title | uppercase}}</h4>
        </div>
   </div>
   <div class="clearfix" *ngIf="(i+1) % 4 == 0"></div>
</div>

Solution

  • You can use template/ng-template or ng-container to achieve it:

    <div class="row">
      <ng-container *ngFor="let item of items; let i = index;">
        <div class="col-xs-12 col-md-3 item" >
              <div class="header">
                  <img src="{{item.image}}" *ngIf="!!item.image">
                  <h4>{{item.title | uppercase}}</h4>
              </div>
        </div>
        <div class="clearfix" *ngIf="(i+1) % 4 == 0"></div>
      </ng-container>
    </div>