Display data from ngFor loop in two columns in Angular

Question

I want to display this form within two columns. The elements with index from 0 to 4 wrapped in a 'col-md-6' class and from index 5 to 8 in a new 'col-md-6'. Can I achieve that?

 <form [formGroup]="openingHoursForm">
   <div *ngFor="let dia of selectedCenter.dias; let i = index">
     <div class="dayOpeningHours" itemprop="openingHours" title="">
       <div>{{ i }}</div>
         <div class="opens">
           <label for="">De:
             <input class="form-control" id="mondayFrom" type="time" formControlName="openingTime{{ dia.diasemana }}" name="openingTime{{ dia.diasemana }}" value="{{ dia.horainicio }}">
           </label>
         </div>
         <div class="closes">
           <label for="">A:
             <input class="form-control" id="mondayTo" type="time" formControlName="closingTime{{ dia.diasemana }}" name="closingTime{{ dia.diasemana }}" value="{{ dia.horafinal }}">
           </label>
         </div>
       </div>
     </div>
  </form>

MoxxiManagarm · Accepted Answer · 2020-10-22 10:45:11Z

2

Use the slice pipe With the SlicePipe https://angular.io/api/common/SlicePipe

<div class="col-md-6">
  <div *ngFor="let dia of selectedCenter.dias | slice:0:5>
    ...
  </div>
</div>
<div class="col-md-6">
  <div *ngFor="let dia of selectedCenter.dias | slice:5:9>
    ...
  </div>
</div>

answered Oct 22, 2020 at 10:45

MoxxiManagarm

9,2214 gold badges20 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Display data from ngFor loop in two columns in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related