Conditional ion-fab button is not visible if the ion-fab-list is open when the condition becomes true

[ebhsgit]

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request

Current behavior: In a ion-fab list with the following setup. If the list is already "open" when the condition change to true, the conditional ion-fab button is added but it is not visible. Closing and re-opening the list will make the button visible.

 <ion-fab top right mini id="actions-fab">
            <button ion-fab mini color="tertiary">
                <ion-icon name="arrow-dropdown"></ion-icon>
            </button>
            <ion-fab-list side="down">
                <button ion-fab mini >
                    <ion-icon name="create"></ion-icon>
                    <ion-label>Button 1</ion-label>
                </button>
                <button ion-fab mini *ngIf="someCondition">
                    <ion-icon name="create"></ion-icon>
                    <ion-label>Button 2</ion-label>
                </button>
                <button ion-fab mini >
                    <ion-icon name="create"></ion-icon>
                    <ion-label>Button 3</ion-label>
                </button>
            </ion-fab-list>
 </ion-fab>

Expected behavior: The button should be visible if the condition is true

Steps to reproduce:

1. start with someCondition = false
2. Open the ion-fab list
3. change someCondition = true

Notice the empty, space is created for Button 2.

Related code:

http://plnkr.co/edit/vsT0ulutHJAjyFRCRIaG?p=preview

Other information: The issue seems to be the ion-fab button does not have the "show" css class.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Ionic:

   Ionic CLI          : 5.2.3
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.4

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 3.1.2, (and 38 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.8

System:

   Android SDK Tools : 26.1.1 
   NodeJS            : v10.16.0 
   npm               : 6.9.0
   OS                : Windows 10

[StefanRein]

The class name show is not being applied to the element, because the FabList component handles the classes and does not listen for changes. They also don't mention that you could show / hide them in the documentation. So this is a feature request, rather than a bug report.

Here are two possibilities:

<button ion-fab mini *ngIf="someCondition" [class.show]="someCondition">
    <ion-icon name="create"></ion-icon>
    <ion-label>Button 2</ion-label>
</button>

Or better:

<button ion-fab mini [hidden]="!someCondition">
    <ion-icon name="create"></ion-icon>
    <ion-label>Button 2</ion-label>
</button>

If you like, you can implement the feature and create a pull request.

You could extend the FabList in a way, that you listen for changes of the ContentChildren and apply then the styles, when something changed.

https://github.com/ionic-team/ionic-v3/blob/master/src/components/fab/fab-list.ts

[ebhsgit]

Thanks @StefanRein,

[class.show] is the work-around I have implemented in my code at the moment.