Action bar buttons won't view when using visibility visible/collapse nativescript

Question

I'm trying to hide some buttons and view another set of buttons by clicking an action item on the same action bar.

But when i use visibility="{{ clientsActionBar ? 'collapsed' : 'visible' }}" it won't work, except for the action buttons.

What happens is:
Since a set of buttons are on top of the other, it will be invisible when collapsed but the other set won't be viewed.

Please help me to sort out this issue. It works perfectly in a grid layout as shown in image(commented part), but i don't want to use a grid layout and do it.

Image of code

Answer 1

Use binding

[visibility]="clientsActionBar ? 'collapse' : 'visible'"

clientsActionBar should be a variable in your .ts