Ionic 4 grid - displaying only one column per row

Question

I would like to display the "Shift' column below and have it take up the entire row. However, the other columns 'admindesc' is coming up on the side of it. How do I keep the 'Shift' column on its own row all by itself?

<ion-content>
  <ion-grid>
    <ion-row *ngFor="let customer of customers; let i=index">
      <ion-col *ngIf="customer.admin==true">
        <ion-card>
          <ion-card-content>
            Shift: {{customer.status}}
          </ion-card-content>
        </ion-card>
      </ion-col>
      <ion-col>
        <ion-label *ngIf="customer.admin==true">{{customer.admindesc}}admin</ion-label>
        {{customer.fullname}}-{{customer.cellphone}}--{{customer.admin}}
      </ion-col>
      <ion-col>
        <ion-checkbox></ion-checkbox>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Answer 1

You can put the structural directive for loop in an <div *ngFor='...'> so that your code looks like this. This will place your shift column in a row of its own and the other content in the second row throughout the iteration.

<ion-content>
  <ion-grid>
    <div *ngFor="let customer of customers; let i=index">
      <ion-row>
        <ion-col *ngIf="customer.admin==true">
         <ion-card>
           <ion-card-content>
             Shift: {{customer.status}}
           </ion-card-content>
         </ion-card>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-label *ngIf="customer.admin==true">{{customer.admindesc}}admin</ion-label>
            {{customer.fullname}}-{{customer.cellphone}}--{{customer.admin}}
        </ion-col>
        <ion-col>
          <ion-checkbox></ion-checkbox>
        </ion-col>
      </ion-row>
    </div>
  </ion-grid>
</ion-content>