ngIf on template not refresh on changes (NG 3.0)

[sis0k0]

From @ignaciolarranaga on May 7, 2017 15:43

Please, provide the details below:

Tell us about the problem

If you refresh an ng-if template the change is not reflected.
Let suppose for example this:

<ng-template [ngIf]="show">
    <Label text="I'm here"></Label>
</ng-template>

and you set a timer for 3 seconds to remove it:

setTimeout(() => { this.show = false; console.log("Removing"); }, 3000);

The section should disappear at the timeout, but it doesn't happen.

Which platform(s) does your issue occur on?

iOS/Android/Both

Please provide the following version numbers that your issue occurs with:

• CLI: 3.0.0
• Cross-platform modules: 3.0.0
• Runtime(s): 3.0.0/3.0.0

Please tell us how to recreate the issue in as much detail as possible.

1. Create a sample project tns create Sample --ng
2. Replace the content of the StackLayout of items.component.html with the following:

<ng-template [ngIf]="show">
    <Label text="I'm here"></Label>
</ng-template>

3. Add this variable to the ItemsComponent show: boolean = true; and a timeout to change it on the ngInit:

setTimeout(() => { this.show = false; console.log("Removing"); }, 3000);

Ready you will see the message Removing but the item stays.
If you change to the *ngIf="show" format it works, just change the template in this way and you will see it:

<ng-template [ngIf]="show">
    <Label text="I'm here1"></Label>
</ng-template>
<Label text="I'm here2" *ngIf="show"></Label>

You will se I'm here2 disappear while the number 1 does not.

Copied from original issue: NativeScript/NativeScript#4136

[sis0k0]

From @ignaciolarranaga on May 7, 2017 15:58

As a quick workaround you can change the structure by using a layout for example:

<StackLayout *ngIf="show">
    <Label text="I'm here1"></Label>
</StackLayout>

[sis0k0]

From @m-abs on May 7, 2017 18:20

I don't think that is an NS problem, but the you're changing the values outside angular.

Have you tried wrapping it in a this.ngZone.run(() => this.show = false)?
Inject NgZone in your component.

[sis0k0]

From @ignaciolarranaga on May 7, 2017 21:11

I actually have the problem on a callback from a service, I just created an easy way of replicate it here. I can try to wrap the asynchrony calls in a zone but doesn't seem to be a very practical solution :).