Binding ion-fab position attributes to a condition


#1

I’m looking to position a fab button conditionally, switching between left or right as needed. Since each of the available HTML attributes are boolean, their value doesn’t matter; just their presence. And the last-used position attribute overrides previous ones where appropriate. So all of these are equivalent:

<ion-fab bottom right #fab>
<ion-fab bottom="false" right="false" #fab>
<ion-fab bottom left="true" right="false" #fab>
<ion-fab bottom left="true" right="null" #fab>

I’ve tried using a standalone interpolation, e.g.

<ion-fab {{condition ? 'bottom right' : 'bottom left' }} #fab>

… as well as an angular attribute, e.g.

<ion-fab bottom [attr.left]="condition ? null : true" [attr.right]="condition ? true : null" #fab>

Nothing seems to work. Am I missing something obvious here?


#2

This was actually fine. The problem was elsewhere. :slight_smile: