Ionic 4 conditional ion-button property


I am in the process of porting my ionic 3 app to ionic 4.

I have the following ion-button:

<ion-button ion-button fill="clear" expand="block">UTILITIES</ion-button>

I was hoping to make the fill=“clear” property dynamic on a variable.

What is the best way to do this?



So how about:

[fill]=“myVarTrue? 'clear':'solid'”

Darn, I was thinking that that would work, but unfortunately I get the following:

Unexpected closing tag “ion-button”. It may happen when the tag has already been closed by another tag.

when I use:

<ion-button ion-button 
                    [fill]=“myVarTrue? 'clear':'solid'”

Ionic v4 has an ion-button component now, so you no longer need the ion-button directive

Sorry, yes that is correct. I removed it.

                        [fill]=“myVarTrue? 'clear':'solid'”

I still have the issue described above.

Any thoughts on how to dynamically configure the button as either clear or solid based upon the variable?

Thanks again,


I know I could use *ngIf and have two ion-buttons. I was hoping to not have to that.

I literally just went into Ionic 4.4 project and did this:

  <ion-button size="small" [fill]="true? 'outline':'solid'" (click)="publisherModeToggle()">
        <ion-label slot="start">{{ publisherMode? 'Publisher':'Creator'}}</ion-label>
        <ion-icon slot="end" [name]="publisherMode? 'paper-plane':'easel'"></ion-icon>

All works, when its “true” I see outline, when it false I see solid button

1 Like

Thanks it turns out it was the type of quotes. I copied your first answer with quotes - “. First one works, second one gives me the error. Thanks again for your help.

   [fill]="true? 'clear':'solid'" 
   [fill]=“myVarTrue? 'clear':'solid'”