Dynamic button in navbar not displaying correct - ionic-framework

Question

I'm having trouble with dynamic button in navbar. Here's the code:
<ion-header>
<ion-navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>{{action.name}}</ion-title>
<ion-buttons end>
<button *ngIf="view.searchable">
<ion-icon name="search"></ion-icon>
</button>
<button *ngIf="view.creatable">
<ion-icon name="create"></ion-icon>
</button>
<button (click)="showMenu($event)">
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Output:
Please help. Thanks!

Answer 1

For some reason, the *ngIfis causing that issue (you can try by removing it, and the button is properly displayed). In order to solve it, you can change it like this:
<ion-header>
<ion-navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>{{action.name}}</ion-title>
<ion-buttons *ngIf="view.searchable" end>
<button>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-buttons *ngIf="view.creatable" end>
<button>
<ion-icon name="create"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button (click)="showMenu($event)">
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Notice that I bind the *ngIfto the ion-buttons element instead of the button directly. Please take a look at this working plunker.