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

@memphisvl

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

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).

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

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?

Same here.

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.

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

ngIf works as expected if value is available at time of rendering
ngIf break any layout (out of order rendering of ngIf elements) if value was delayed (eg: async call)
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.

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>

@EddyVerbruggen

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

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

@sis0k0

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>

fix(renderer): attach `CommentNode`s to visual tree

NickIliev got it right. I had the problem with the following html on android only and broken on IOS. however after upgrading it works.

Thanks for your assistance
<StackLayout class="text-left" *tabItem="{title: 'Details'}">
<div *ngIf="!isLoadingImages">
<GridLayout height="250" [carousel]="gallery" carouselLabelOverlay="true" carouselSpeed="2000">

<div *ngIf="isLoadingImages">

@NickIliev

hey @NickIliev that was really helpful im really struggling with this issue for days.
after updating tns-core-modules ng-if working perfectly in ios. Thanks a lot for help.
npm i tns-core-modules@next --save

I feel like this needs to be re-opened again, how it possible that I'm still seeing this issue in {N} 4.1.1 with tns-core-modules@next (^4.2.0-2018-07-21-02). Same with ngSwitch and [visibility] also does not work as expected. I have yet to find a workaround

<GridLayout class="thumb-icon" [ngSwitch]="location.progress">                    
    <Label *ngSwitchCase="null" text="&#xf1f8;" class="fas fa-trash"></Label>
    <Label *ngSwitchCase="100" text="&#xf058;" class="fas fa-check-circle"></Label>
    <Progress *ngSwitchDefault [value]="location.progress" maxValue="100"></Progress>
</GridLayout>

<GridLayout class="thumb-icon">                    
                    
   <Label *ngIf="location.progress == null" text="&#xf1f8;" class="fas fa-trash"></Label>
   <Label *ngIf="location.progress == 100" text="&#xf058;" class="fas fa-check-circle"></Label>
   <Progress *ngIf="location.progress > 0" [value]="location.progress" maxValue="100"></Progress>
</GridLayout>

Neither version works to show the progress bar when location.progress is updated. I can see location.progress updating in the UI via a simple <Label>

Here's a playground to demonstrate the issue which is still present in {N} 4.1

https://play.nativescript.org/?template=play-ng&id=xRtLDX&v=4

The top section does now show the progress bar when u start the "upload", meanwhile the bottom section does.

The only difference between these 2 ListViews is that in the top case I pass the countries reference via [items]="countries" whereas on the bottom I pass a copy of the array each time via [items]="countries.slice()". The latter fixes the issue but this is not a solution for me because in my case the items are actually images and passing a new reference on every read causes the images to reload and jitter every digest cycle.

I have tried the same implementation with a GridView (instead of ListView) so it seems evident that the problem really arises when using *ngIf or *ngSwitch inside an *ngFor that is iterating over an array reference.

Can somebody please take a look into fixing this. Since passing an array reference is actually the correct way to use ngFor, it seems that this is a very common and rudimentary use case and it's a real bummer to have this present after 1 year of this issue being open. I currently have no workaround for this, as I would just be trading one bug for another (I have to choose between a progress bar and image jitter/constant reloads).

Still in NS 4+, I found that using this.ngZone.run(() => { this.foo = false; }) works well in re-rendering the view content in case it doesn't work

When I bind a function to the *ngIf instead of binding an attribute, it works fine, except for the "Expression has changed after last checked" error.

@kamok

When I bind a function to the *ngIf instead of binding an attribute, it works fine, except for the "Expression has changed after last checked" error.

Thanks @kamok this solution worked for me. This seems to be the simplest temporary workaround that I have seen in the thread. The update to the tns core modules didn't work for me as well.

I face the same issue, but found another work around (works for me, but no guarantees...).
I place a Label above the element with the *ngIf :
<Label [visibility]="mLoaded && !hasM ? 'hidden' : 'hidden'" text=""></Label> and now it works. Why?!, I don't know. I cannot explain it.

I was very excited to learn Ionic, sadly landed on Ionic 4 which seems overly unstable right now! For me, [(ngModel)] two-way binding, *ngIf, and *ngFor all not working when I do and Android release of my app... ! I can only imagine I would face the same issues on iOS... I could perhaps resolve the ngIf with that visibility workaround but how do I fix the ngFor and [(ngModel)]? I posted my model binding issues here and here if anyone could kindly offer me some help?

Any updates on this issue?

For me, this is still an issue. Can't really use *ngIf properly in NS+Angular

also having trouble with *ngIf, its rendering my element outside of parent element

@NgModule

For me this wasn't working because I'd missed the inclusion of some declarations under @NgModule in app.module.ts:

@NgModule({
  declarations: [
    AppComponent,
    TopBarComponent,
    ProductListComponent,
    ProductAlertsComponent,
    ProductDetailsComponent,
    CartComponent,
    ShippingComponent
  ],

I have also problem with ngIf inside a p-splitter template. If I move the splitter, the ngIf seams to be ignored and all the code will be placed in the dom.

yes i have same issue in ios app only so i added ngZone this one solved my problem for ios app.

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

import { Component, OnInit, NgZone } from '@angular/core';

constructor(private service: ApiService, private zone: NgZone) {
    this.getDataFromApi();
 }

getDataFromApi(): void {
    this.service.getDataFromApi().subscribe(score => {
      this.zone.run(() => {
        this.isPresent= isPresent;
      });
      
    })
  }

Navigation Menu

Repository navigation

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

19 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

mcrvaz commented on Jun 30, 2017

danielgek commented on Jun 30, 2017

NathanWalker commented on Jun 30, 2017

berchik commented on Jul 2, 2017

u14040426 commented on Jul 3, 2017

memphisvl commented on Jul 3, 2017

EddyVerbruggen commented on Jul 4, 2017

pauly815 commented on Jul 4, 2017

sis0k0 commented on Jul 5, 2017

EddyVerbruggen commented on Jul 5, 2017

19 remaining items

bettsjj commented on Apr 29, 2018

divyachandana commented on Jul 7, 2018

parliament718 commented on Jul 23, 2018

parliament718 commented on Jul 24, 2018

racknoris commented on Aug 27, 2018

kamok commented on Sep 5, 2018

boldham31 commented on Sep 20, 2018

WouterVanVegchel commented on Dec 18, 2018

Morgs007 commented on Jan 5, 2019

jimb77 commented on Dec 2, 2019

csimpi commented on Mar 21, 2020

Nurtylek commented on Jun 5, 2020

gbro3n commented on Mar 8, 2021

stan1025 commented on Mar 14, 2021

qualcentric-web-solutions commented on Oct 14, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions