Repository navigation
[Angular 10] Using *ngIf breaks layout order #2249
Description
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.
Activity
OliverNiebsch commentedon Sep 14, 2020
This is also a bug with Angular 9, see here: #2176
ivanthz commentedon Sep 16, 2020
Same problem here. Appeared after upgrade to Angular 10 and NS 7.0.
NathanWalker commentedon Sep 21, 2020
This issue is now fixed with @NativeScript/angular 10.1.3 published now 👍
rickwalking commentedon Oct 6, 2020
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 commentedon Oct 6, 2020
@rickwalking can you try this release: https://github.com/edusperoni/nativescript-angular/releases/tag/8.21.2 ?