[Angular 10] Using *ngIf breaks layout order

[mohammadrafigh]

Environment

• CLI: 7.0.7
• Android Runtime: 7.0.0
• NativeScript-Angular: 10.1.0
• Angular: 10.1.0

Describe the bug
Using *ngIf over an element/component breaks layout order unless the element/component is wrapped in another layout.

To Reproduce
just try:

<StackLayout>
    <Label text="First label" *ngIf="true"></Label>
    <Label text="Second label"></Label>
</StackLayout>

Expected behavior
First label should be rendered before Second label.

Sample project
https://github.com/mohammadrafigh/dynamic-component-issue

Additional context
I'm not sure if it just happens with StackLayout or not but as a workaround wrapping First label like this fixes the order problem:

<StackLayout>
    <StackLayout>
        <Label text="First label" *ngIf="true"></Label>
    </StackLayout>
    <Label text="Second label"></Label>
</StackLayout>

If it helps, the problem occurred after upgrading to Angular 10.0.0 but since the core module was in "rc" I thought this might be a known issue and would be fixed in final release, So this may be an inconsistency problem with Angular rendering behavior and Nativescript runtime.

[OliverNiebsch]

This is also a bug with Angular 9, see here: #2176

[ivanthz]

Same problem here. Appeared after upgrade to Angular 10 and NS 7.0.

[NathanWalker]

This issue is now fixed with @NativeScript/angular 10.1.3 published now 👍

[rickwalking]

Hi @NathanWalker. I'm facing this issue in a large messaging application. I can't update to Angular 10 yet because there are plugins with no NativeScript 7 compatibility. Shouldn't this be the case to have a fix for this issues also available in the @nativescript/angular 9 package?

[edusperoni]

@rickwalking can you try this release: https://github.com/edusperoni/nativescript-angular/releases/tag/8.21.2 ?