Property binding "slot" doesn't work at ion-tab-bar

Hi!
I need to place ion-tab-bar on bottom when the platform is mobile, and on top when is not mobile.

I used property binding in ion-tab-bar:
<ion-tab-bar [slot]="platform.is('mobile') ? 'bottom' : 'top'">

But didn’t work. I checked the test in the browser (in mutiple platforms) and the property is being applied correctly, but the bar remains at the bottom.

I also tried:
<ion-tab-bar [slot]="tabsSlot">
And in *.page.ts:
tabsSlot: string = "top";

But didn’t work either.

Only when a used:
<ion-tab-bar slot="top">
that worked.

Why does this happen? Does the property binding not work with this tag or property?

See issue 19484.

1 Like