*ngIf not working in Angular application for hide/show layout after upgrade to NS3

[NickIliev]

From @memphisvl on June 29, 2017 19:56

It used to work on {N} 2.5 and now it seems that the only way to show/hide some elements is using visibility option.

Before

<StackLayout class="page">
  <Label *ngIf="isPresent" text="{{showText}}"></Label>        
</StackLayout>

Now (Workaround)

<StackLayout class="page">
  <Label visibility="{{isPresent ? 'visible' : 'collapse'}}" text="{{showText}}"></Label>        
</StackLayout>

Is this expected and from now on I will have to use visibility for UI logic?

Versions

    "@angular/animations": "~4.1.0",
    "@angular/common": "~4.1.0",
    "@angular/compiler": "~4.1.0",
    "@angular/core": "~4.1.0",
    "@angular/forms": "~4.1.0",
    "@angular/http": "~4.1.0",
    "@angular/platform-browser": "~4.1.0",
    "@angular/platform-browser-dynamic": "~4.1.0",
    "@angular/router": "~4.1.0",
    "moment": "^2.18.1",
    "nativescript-angular": "^3.1.0",
    "nativescript-angular-snapshot": "1.5.2-5.5.372.32",
    "nativescript-carousel-view": "^2.9.0",
    "nativescript-google-maps-sdk": "^2.3.0",
    "nativescript-loading-indicator": "^2.3.2",
    "nativescript-local-notifications": "^1.2.1",
    "nativescript-platform-css": "^1.4.0",
    "nativescript-plugin-firebase": "^4.0.2",
    "nativescript-pulltorefresh": "^2.0.1",
    "nativescript-push-notifications": "^0.1.2",
    "nativescript-sidedrawer": "^1.0.6",
    "nativescript-theme-core": "~1.0.2",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.3.0",
    "tns-core-modules": "^3.1.0",
    "zone.js": "~0.8.2"

TNS Paltform
3.1.0

Copied from original issue: NativeScript/NativeScript#4479

[mcrvaz]

I'm having some similiar issues with *ngIf, sometimes the elements are rendered out of order, sometimes aren't even rendered. Seems to be related with the last version (3.1.0).

[danielgek]

Me to, not only with *ngIf but *ngFor too

[NathanWalker]

I have found visibility to be more stable generally. Perhaps a directive should be added here out of the box to make visibility more like ngIf in that sense - maybe even call it ngShow which would use the visibility attribute under the hood?

[berchik]

Same here.

[u14040426]

I also have a similar issue, where after a http request and setting a boolean to true to show content, the content doesnt show. But what prompted me top try this, was the http request returns a string which is supposed to change a labels text but it didnt change. That is why I wrapped it in a ngIf but then it doesnt show at all.

[memphisvl]

After I did the upgrade and had to redo my Angular layout logic I've found these issues with ngIf:

1. ngIf works as expected if value is available at time of rendering
2. ngIf break any layout (out of order rendering of ngIf elements) if value was delayed (eg: async call)
3. visibility seem to be good alternative

Overall it was unpleasant to find out that what used to work with {N}2.5 is not working in {N}3.x.
At least I know, that am not alone) For anyone wondering about workarounds use [visibility] for Angular html layouts.

[EddyVerbruggen]

A possible workaround for out-of-order rendering could be separating the elements in different <StackLayout>s. My case was this:

<StackLayout>
  <GridLayout id="g1" *ngFor>
  </GridLayout>
  <GridLayout id="g2">
  </GridLayout>
</StackLayout>

Because of the ngFor "g2" was rendered before "g1".

This fixed it:

<StackLayout>
  <StackLayout>
    <GridLayout id="g1" *ngFor>
    </GridLayout>
  </StackLayout>
  <StackLayout>
    <GridLayout id="g2">
    </GridLayout>
  </StackLayout>
</StackLayout>

[pauly815]

@EddyVerbruggen Your workaround resolved my issue with multiple *ngIf items better than the visibility workaround. Thanks!

[sis0k0]

Hey, guys! Can you share some code snippets where items are rendered out of order?

[EddyVerbruggen]

Hi @sis0k0, here's one I hope you find useful:

<StackLayout>
  <!-- NOK -->
  <StackLayout>
    <Label text="label 1"></Label>
    <Label text="label 2"></Label>
    <Label text="label 3" *ngIf="true"></Label>
    <Label text="label 4"></Label>
  </StackLayout>

  <!-- OK -->
  <StackLayout>
    <Label text="label a"></Label>
    <Label text="label b"></Label>
    <StackLayout>
      <Label text="label c" *ngIf="true"></Label>
    </StackLayout>
    <Label text="label d"></Label>
  </StackLayout>
</StackLayout>