Search code examples
angularangular-ng-if

Angular: Create two columns by count


The code below is creating two columns based off of even and odd. What would I change so instead of even and odd it displays the first 8 results in column one and the remainder in column two?

<div *ngFor="let year of userYear; let i = index">
     <div *ngIf='i%2 === 0' class="float-left left-column push-left"><span>{{year}}</span></div>
     <div *ngIf='i%2 !== 0' class="float-left right-column"><span>{{year}}</span></div>
</div> 


Solution

  • Just change i%2 === 0 to i < 8 and i%2 !== 0 to i >= 8:

    <div *ngFor="let year of userYear; let i = index">
         <div *ngIf='i < 8' class="float-left left-column push-left"><span>{{year}}</span></div>
         <div *ngIf='i >= 8' class="float-left right-column"><span>{{year}}</span></div>
    </div>