Using *ngIf
breaks my layout
With this piece of code item-right
is totally ignored.
Ins
Instead of positioning my badge correctly it positioned like it doesn’t have an item-right
class. Without *ngIf
everything works like charm.
<ion-badge *ngIf="item.amount > 0" bonus item-right>{{item.type}} {{item.amount}} min.</ion-badge>
As I found out this is a well-known #Angular 2 #bug - https://github.com/angular/angular/issues/6303.
And it is already fixed. But it is not fixed in Ionic 2 default project template.
The whole code fragment looks like this:
<ion-list>
<button ion-item detail-none *ngFor="#item of items" (click)="itemTapped($event, item)">
<!--<ion-icon name="{{item.icon}}" item-left></ion-icon>-->
<h3>{{item.name}}</h3>
<div [ngSwitch]="item.type">
<ion-badge *ngSwitchWhen="'+'" bonus item-right>{{item.type}} {{item.amount}} мин.</ion-badge>
<ion-badge *ngSwitchWhen="'+'" bonus item-right>{{item.type}} {{item.amount}} мин.</ion-badge>
</div>
<p>
{{item.date}}
</p>
</button>
</ion-list>