Correct way to implement dynamic columns of buttons

Ionic Framework ionic-v3
1

Hi, I have a situation where a row might have 2 or 3 buttons

Approach 1:

<ion-grid>
   <ion-row>
     <ion-col> <button ion-button>Button 1</button></ion-col>
    <ion-col> <button ion-button *ngIf="condition">Button 2</button></ion-col>
    <ion-col> <button ion-button>Button 3</button></ion-col>
  </ion-row>
</ion-grid>

Problem here is the ngIf is inside the button, so even if button 2 does not show, we get an empty <ion-col></ion-col> column. The effect of this is Button 3 touches the end of the screen (does not if the empty ion-col went away)

Approach 2:

<ion-grid>
   <ion-row>
     <ion-col> <button ion-button>Button 1</button></ion-col>
    <span *ngIf="condition"><ion-col> <button ion-button>Button 2</button></ion-col></span>
    <ion-col> <button ion-button>Button 3</button></ion-col>
  </ion-row>
</ion-grid>

The problem here is “Button 2” and “Button 1” and not vertically aligned - button 2 gets pushed up. I suppose the span messes up the hierarchy inside the grid. (I tried div too - same problem)

So what might be the best way to solve this? (We can’t do ngIfs in ion-col because that results in DOM parse errors)

2

Ah problem solved. Using the equivalent of ng-show (aka [hidden]) is the answer

<ion-grid>
   <ion-row>
     <ion-col> <button ion-button>Button 1</button></ion-col>
    <ion-col [hidden]="condition"> <button ion-button>Button 2</button></ion-col>
    <ion-col> <button ion-button>Button 3</button></ion-col>
  </ion-row>
</ion-grid>