Ionic 4 conditional ion-button property

Ionic Framework ionic-v3
1

Hello,

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?

Thanks,

Brent

2

So how about:

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

3

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'”
                    expand="block"
                    (click)="toggleMode('offline')">UTILITIES</ion-button>
4

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

5

Sorry, yes that is correct. I removed it.

            <ion-button 
                        [fill]=“myVarTrue? 'clear':'solid'”
                        expand="block"
                        (click)="toggleMode('offline')">UTILITIES</ion-button>

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,

Brent

6

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

7

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>
  </ion-button>

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

2 Likes
8

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'”
2 Likes