Angular 9: Using ngIf changes order of children inside a StackLayout

[OliverNiebsch]

Environment

• CLI: 6.7.4
• Cross-platform modules: 6.5.0
• Android Runtime: 6.5.1
• iOS Runtime: 6.5.1
• NativeScript-Angular: 9.0.0
• Angular: 9.1.0

Describe the bug
After upgrading from Angular 8 to Angular 9: When using *ngIf on a component that's together with other components wrapped by a StackLayout, the component with ngIf is always added as the last child when the Page is rendered.

<StackLayout>
    <Label text="Line 1"></Label>
    <Label text="Line 2" *ngIf="true"></Label>
    <Label text="Line 3"></Label>
</StackLayout>

To Reproduce
Just start the app from the sample repository.

Expected behavior
"Line 2" is between "Line 1" and "Line 3". ngIf does not change the order of the elements.

Sample project
See here

Please ask when something is left uncleared. Thanks in advance!

[chevallard]

Just to add in case it helps: this is occuring in FlexboxLayout as well as the StackLayout mentioned above. An *ngIf directive on either an ng-container or directly on an element causes it to always come after elements that don't have the directive, even if the initial value of the *ngIf is true

I tried manually triggering change detection using ChangeDetectorRef after all elements were loaded, with no luck.

[sublime392]

As a work around, I have added an *ngIf with a variable that is always true to all the elements that did not already have an *ngIf. It seems to be working. The two components I have tried so far are in the correct order after doing this. I didn't really expect it to work since the other *ngIf items are mostly using observables with async. I thought since they will most likely be resolving at various times, things would still be out of order, but surprisingly enough, that doesn't seem to matter. One just needs to *ngIf all the things.

Update: I found a component where this didn't work, so it isn't a perfect work around. Still, it mostly works.

Update 2: I don't know if this brings anything to the table, but this isn't an entirely new issue. I have never been able to resolve an ordering issue with the following (don't mind the Pug, I love the cleanliness of Pug):

StackLayout()
        Label( text="Share Accounts", fontSize="20")
        ng-template(ngFor, let-shareAccount, [ngForOf]="shares", let-i="index")
          cbs-account.account-panel([account]="shareAccount", [index]="i", (onAccountPanelClick)="showAccountDetails($event,true)")
          cbs-ad-carousel.account-panel(*ngIf="i == 0")

The carousel was supposed to display after the first item in the ngFor, but it always sat at the bottom of the list. Now, it displays in the correct position with the magic *ngIfs. The following displays in the correct order:

StackLayout()
        Label( text="Share Accounts", fontSize="20")
        ng-template(ngFor, let-shareAccount, [ngForOf]="shares", let-i="index")
          cbs-account.account-panel(*ngIf="showLayout", [account]="shareAccount", [index]="i", (onAccountPanelClick)="showAccountDetails($event,true)")
          cbs-ad-carousel.account-panel(*ngIf="i == 0")

Here, the newly added showLayout is just this variable added to the component: public showLayout = true;.

[crowmagnumb]

This one is biting me in so many ways now. :) Hoping there is a fix real soon for this. :)

[OliverNiebsch]

Are there any news on this? Really looking forward to this since it's messing up my UI and I don't like the workaround at all :/

[iamabs2001]

Are there any news on this? Really looking forward to this since it's messing up my UI and I don't like the workaround at all :/

in Progress...

[pekevski]

I see this occur with an *ngFor

<Label *ngFor="...">
<Label text="BBB">

The BBB label will appear before the ngFor labels.

[ivanthz]

For now I'm using an additional Stack to get around the problem:

<StackLayout>
    <Label text="Line 1"></Label>

    <!-- TODO: Remove additional Stack: *ngIf order error -->
    <StackLayout>
        <Label text="Line 2" *ngIf="true"></Label>
    </StackLayout>

    <Label text="Line 3"></Label>
</StackLayout>

[crowmagnumb]

I have not seen this in the nativescript 7 release. I believe this has been fixed.

[ivanthz]

Now All fine with angular 10

Can you share your package.json?
I'm using NS 7 with Angular 10 and the problem still here.

[crowmagnumb]

Did you follow this upgrade process? I had some issues with it but have them ironed out now.

You should have the latest nativescript globally installed ...

npm i -g nativescript@~7.0.0

The relevant parts of my package.json are ...

    "dependencies": {
        ....
        "@nativescript/angular": "^10.0.0",
        "@nativescript/core": "^7.0.0",
        ...
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "^0.1000.3",
        "@angular/cli": "^10.0.0",
        "@angular/compiler-cli": "^10.0.0",
        "@angular/language-service": "^10.0.0",
        "@nativescript/android": "7.0.0",
        "@nativescript/ios": "7.0.0",
        "@nativescript/webpack": "~3.0.3",
        "typescript": "~3.9.0"
    }