Angular and Ionic 2 : Showing 2 columns per row with NgFor and a conditional display

Question

What I'm trying to do is to show a 2 columns per row in an ionic 2 app, and when a user enters some text in search box, for example typing a a text that only exists on the second row, the first one disappears (which actually happens now, but keeps the second column on the right and not getting it in the place of the hidden one).

Here is the code I'm using now which is not getting my columns in same row :

<ion-grid>
    <div [ngSwitch]="top">
      <div *ngSwitchCase="'resto'">
        <ion-row responsive-sm wrap *ngFor="let data of topRestaurants | ArrayObject ">
          <ion-col col-6 *ngIf="data.value['title'].toLowerCase().includes(textFilter)">
            <ion-card>
                <ion-col col-12 no-margin no-padding><img src="{{data.value['logo']}}"/></ion-col>
                <ion-col col-12 no-margin no-padding>
                  <ion-card-content>
                    <ion-card-title>
                      {{data.value['title']}} <ion-badge item-end>{{(data.value['distance']) | number:'1.2-2'}} km</ion-badge>
                    </ion-card-title>
                    <p>
                      <small><rating [score]="data.value['overall_rating']" [max]="5"></rating> ({{data.value['reviews_count']}}) Avis</small>
                    </p>
                  </ion-card-content>
                </ion-col>
            </ion-card>
          </ion-col>
        </ion-row>
      </div>

When I make the ion-col style like following : display : inline-block, width:50%, it makes it works almost fine, but makes the block keeps his place (the 50%) even when ngIf is false (because the row still exists on the DOM, and we remove the col instead :/ )

Answer 1

You can move the *ngFor from the <ion-row> to the <ion-col>. The way you have it now prevents the <ion-col>s from ever moving vertically because they will stay in their rows. If you move the *ngFor you will only have one <ion-row> with n <ion-col>s. When you have a column width of 6 (col-6) you will only have two columns on a row anyway, because when the column width exceeds 12 it will break to a new row. When one of your items gets removed because of the *ngIf the layout will adjust itself.

One problem that will come out of moving the *ngFor-statement is that you will have to move the *ngIf, because you can not have multiple structural-directives (*ngIf, *ngFor) on a host element (structural directive docs).