Make An Angular *ngfor Draw Two Different Columns Of Data

I'm trying to make a *ngFor directive to put data in two columns, instead of just one column as usual. I even followed an example I saw over there, but it didn't work at all. Let's

Solution 1:

The issue is that you have two class attributes for each div, so Angular is taking the later class only.

Simply merge the class attribute like:

<div class="left-style col-md-6" *ngIf="i%2 == 0">

And both classes will be applied.

You can actually use less html and use ngClass as follows

<divclass="col-md-6" [ngClass]="{'left-style': i%2 != 0, 'right-style': i%2 === 0 }"><ahref="javascript:void(0)" [style.cursor]="cursor(level)"class="btn-flat white separator" (click)="deselectLevel(level)"><iclass="fa fa-times"></i> 
          {{ level?.label || level }}
        </a></div>

Solution 2:

Easy way: I am making the Angular demo Tour of Heroes and i wanted to divide in two columns the dashboard data *ngFor display;(like this)

this is code it works for me right now:

<!--repeater creates as many links as
          are in the component's heroes array.--><a *ngFor="let hero of heroes;"routerLink="/detail/{{hero.id}}"><!--ESTE STYLE SIRVE PARA QUE NO SE DEMADRE EL TAMAÑO DE CADA
      DIV, ELLIPSIS AYUDA EN ESTO--><divstyle="
       width: 50%;
       float: left;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;"class="module hero">
          {{hero.name}}            
      </div></a>