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>

Drs · Answer 1 · 2019-07-20T07:38:25.623

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>

size attribute was introduced in ionic 4, are you using ionic 4? https://ionicframework.com/docs/layout/grid#all-breakpoints — Drs, Jul 20 '19 at 07:22
on [size] i am getting a template parse error size is not a known property of ion-col sorry i thought i was on ionic 4 but i am on 3 although i remember migrating on 4 — , Jul 20 '19 at 07:28
Ionic: ionic (Ionic CLI) : 4.12.0 (C:\Users\Simos\AppData\Roaming\npm\node_modules\ionic) Ionic Framework : ionic-angular 3.9.2 @ionic/app-scripts : 3.2.3 Cordova: cordova (Cordova CLI) : 8.0.0 Cordova Platforms : android 7.1.2 Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.5, (and 14 other plugins) System: Android SDK Tools : 26.1.1 (C:\Users\Simos\AppData\Local\Android\Sdk) NodeJS : v10.13.0 (C:\Program Files\nodejs\node.exe) npm : 6.4.1 — , Jul 20 '19 at 07:47
for the current project version you need to check a package.json file for @ionic/angular version — Drs, Jul 20 '19 at 08:01
no it doesnt work. It shows b in col-12 and others in col-6 but only one per row. i want two per rows (a, c and d),. I mean the ionic 3 version — , Aug 01 '19 at 12:59
the *ngFor must be on the ion-col or it wont work even on ionic 3 version — , Aug 02 '19 at 13:14

score 0 · Answer 2 · answered Jul 20 '19 at 05:35

0

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>

answered Jul 20 '19 at 05:35

rtpHarry

13,019
4
43
64

thanks @rtpriamy i know about ngIf and else but the ngfor should be on the ion-col right? how will i get the object's type parameter to call the ngif? – Jul 20 '19 at 06:29
I think drs answer should solve it for you, i will look into this again if not? – rtpHarry Jul 21 '19 at 11:23
Hmm, I dont have much Ionic3 experience, but looking at the docs it uses directives for the col width and you [cannot conditionally set a directive](https://stackoverflow.com/a/44636579/156388). Are you saying that the grid breaks if there is a div between `ion-row` and `ion-col`? – rtpHarry Aug 03 '19 at 06:46

Change ion-col breakpoint in *ngFor

2 Answers2