Change ion-col breakpoint in *ngFor

Question

Hello i want to change the ion-col breakpoint and width while i display rows from my db.

I want rows with item.type= 'B' to be col-12 but rows with item.type A,C,D to be col-6. Any idea?

      <ion-grid>
            <ion-row>
                <ion-col col-6 *ngFor="let item of items;" >
                    <ion-card>
                        <ion-card-content>
                            <div *ngIf="item.type==='A'">
                                some data
                            </div>
                            <div *ngIf="item.type==='B'">
                                some data 2
                            </div>
                            <div *ngIf="item.type==='C'">
                                some data 3
                            </div>
                            <div *ngIf="item.type==='D'">
                                some data 4
                            </div>
                        </ion-card-content>
                    </ion-card>
                </ion-col>
            </ion-row>
        </ion-grid>

Answer 1

you can achieve this using size attribute in ionic 4.

 <ion-col *ngFor="let item of items;" [size]="item.type == 'B' ? 12 : 6 ">
                <ion-card>
                    <ion-card-content>
                        <div *ngIf="item.type==='A'">
                            some data
                        </div>
                        <div *ngIf="item.type==='B'">
                            some data 2
                        </div>
                        <div *ngIf="item.type==='C'">
                            some data 3
                        </div>
                        <div *ngIf="item.type==='D'">
                            some data 4
                        </div>
                    </ion-card-content>
                </ion-card>
 </ion-col>

refrence https://ionicframework.com/docs/layout/grid#all-breakpoints

for ionic 3 you can use this code

 <ion-grid> <ion-row *ngFor="let item of items;"> <ng-container *ngIf="item.type == 'B'"> <ion-col col-12 > <ion-card> <ion-card-content> <div *ngIf="item.type==='A'"> some data </div> <div *ngIf="item.type==='B'"> some data 2 </div> <div *ngIf="item.type==='C'"> some data 3 </div> <div *ngIf="item.type==='D'"> some data 4 </div> </ion-card-content> </ion-card> </ion-col> </ng-container> <ng-container *ngIf="item.type != 'B'"> <ion-col col-6 > <ion-card> <ion-card-content> <div *ngIf="item.type==='A'"> some data </div> <div *ngIf="item.type==='B'"> some data 2 </div> <div *ngIf="item.type==='C'"> some data 3 </div> <div *ngIf="item.type==='D'"> some data 4 </div> </ion-card-content> </ion-card> </ion-col> </ng-container> </ion-row> </ion-grid>

Answer 2

You can use this technique:

• https://angular.io/api/common/NgIf

If you read through you will see something called the else block:

<div class="hero-list" *ngIf="heroes else loading">
 ...
</div>

<ng-template #loading>
 <div>Loading...</div>
</ng-template>

So in your case it would be

<div *ngIf="item.type=='B' else sixRow">
 ...
</div>

<ng-template #sixRow>
 ...
</ng-template>