*ngIf doesn't working in iOS platform using Nativescript

Question

I have a big problem in my project. I'm using a *ngIf that work only in android platform. In iOS platform doesn't work.

I have this code in HTML:

<GridLayout columns ="auto, auto" rows="*" (tap)="open()">
  <StackLayout col="0" row ="0">
     <label text="SomethingText"></label>
  </StackLayout>
  <StackLayout col="1" row ="0" *ngIf="sub">
     <label text="Right"></label>
  </StackLayout>
  <StackLayout col="1" row ="0" *ngIf="!sub">
    <label text="Bottom"></label>
  </StackLayout>
</GridLayout>

In TS I have:

sub: boolean = false;

public open() {
   this.sub= !this.sub;
    console.log('value',this.sub)
    }

When I click function in view show not correct, show empty, Right,Bottom,Bottom,etc.

But console in function show correct true , false in each click.

Please, can you ask me any idea how to solution this problem?

Can you share a Playground sample where the issue can be reproduced? — Manoj

Narendra Narendra · Accepted Answer · 2019-09-13T00:04:37

best way to implement this is to use ngif/else instead of having 2 ngif blocks.

<StackLayout col="1" row ="0"  *ngIf="sub === true; else elseBlock"><label text="Right"></label>
  </StackLayout>
<ng-template #elseBlock> <StackLayout col="1" row ="0">
    <label text="Bottom"></label>
  </StackLayout></ng-template>

For further reading, you can refer here.

*ngIf doesn't working in iOS platform using Nativescript

1 Answers