Display Component Inside Listview Template Not Updating with Async #30
Description
Environment
"dependencies": { "@angular/animations": "~12.0.0", "@angular/common": "~12.0.0", "@angular/compiler": "~12.0.0", "@angular/core": "~12.0.0", "@angular/forms": "~12.0.0", "@angular/platform-browser": "~12.0.0", "@angular/platform-browser-dynamic": "~12.0.0", "@angular/router": "~12.0.0", "@nativescript/angular": "~12.0.0", "@nativescript/core": "~8.0.0", "@nativescript/theme": "~3.0.1", "@nativescript/zone-js": "2.0.1", "rxjs": "^6.6.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular/compiler-cli": "~12.0.0", "@nativescript/ios": "8.0.0", "@nativescript/types": "~8.0.0", "@nativescript/webpack": "beta", "@ngtools/webpack": "~12.0.0", "typescript": "~4.2.0" }, Describe the bug
Using a component inside of the ListView's ngTemplate does not update the view when changes occur in the Observable tied to that listview. The display component never registers an OnChanges event. This worked previously in a project using NS7 and NG10 and stopped working when we upgraded to NS8 and NG12.
To Reproduce
This is a starter project that was generated with ns create testApp --angular. It has an ItemService that now returns an observable array and in the main view there is a button that will change the name of the first item in that observable.
The working branch does not use a component inside of the ngTemplate and the view updates as expected.
https://github.com/nickmorlan-newinnov/listview-component
<ListView [items]="players$ | async" row="1"> <ng-template let-player="item"> <StackLayout> <Label style="font-size: 20px; font-weight: bold" [text]="player.name"></Label> <Label col="1" row="0" [text]="player.name" textWrap="true"></Label> </StackLayout> </ng-template> </ListView> This branch uses a component for the display and does not update the view.
https://github.com/nickmorlan-newinnov/listview-component/tree/component-in-listview
<ListView [items]="players$ | async" row="1"> <ng-template let-player="item"> <item-node [item]="player"></item-node> </ng-template> </ListView> Expected behavior
That the component inside of the template would update, it doesn't appear to be registering an input OnChange event.
Additional context
I could be doing this wrong and it is a terrible idea to use a display component within a ListView ngTemplate.