Alternate column order using ngFor

Question

How can I alternate the order of the columns for each row using ngFor?

For example here the image will always be on the right. How can I do so that in each row I alternate and the image shows one on the left and one on the right and so on?

<div class="row" *ngFor="let servicio of servicios">
  <div class="col-lg-5">
    {{ servicio.titulo }}
  </div>
  <div class="col-lg-7">
    <img src="{{ servicio.imagen }}" alt="">
  </div>
</div>

Answer 1

You can use the local variables available, for example even and odd, in *ngFor to alternate the order of the columns with two ngIf directives. One of them makes titulo the first column for rows with an even index, the other one makes it the last column for rows with an odd index.

<div class="row" *ngFor="let servicio of servicios; let even=even">
  <div *ngIf="even" class="col-lg-5">
    {{ servicio.titulo }}
  </div>
  <div class="col-lg-7">
    <img src="{{ servicio.imagen }}" alt="">
  </div>
  <div *ngIf="!even" class="col-lg-5">
    {{ servicio.titulo }}
  </div>
</div>

See this stackblitz for a demo.