*ngIf condition makes right to left with inner content

@fredy26 wrote:

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>

Posts: 2

Participants: 2

Read full topic