Using ListView's itemLoading and itemTemplateSelector cause binding errors

[s-ovation]

Environment

• CLI: 8.0.2
• Cross-platform modules: 8.0.8
• Android Runtime: 8.0.0
• iOS Runtime: 8.0.0
• Plugin(s): -
• NativeScript-Angular: ~12.0.0
• Angular: ~12.0.0

Describe the bug

As shown below, using itemTemplateSelector and itemLoading properties simultaneously, the bindings in the ng-template for the listview component does not work properly.

items.component.html

  <ListView [items]="items" [itemTemplateSelector]="templateSelector" (itemLoading)="onItemLoading($event)">
    <ng-template let-item="item" nsTemplateKey="main">
      <StackLayout>
        <Label [text]="item.name"></Label>
      </StackLayout>
    </ng-template>
  </ListView>

items.component.ts

  templateSelector() {
    return "main";
  }

  onItemLoading(args: ItemsLoading) {
    console.log("args", args.index);
  }

This shows following errors:

JS: [HMR][242d1734253494e72b27] success | Successfully applied update.
JS: args 0
JS: ERROR TypeError: Cannot read property 'name' of undefined
JS: args 1
JS: ERROR TypeError: Cannot read property 'name' of undefined
JS: args 2
JS: ERROR TypeError: Cannot read property 'name' of undefined
JS: args 3
JS: ERROR TypeError: Cannot read property 'name' of undefined
... and so on.

If you get rid of 'itemLoading' property, this sample works as expected.

Sample project to reproduce

https://github.com/s-ovation/nslistviewbug

[edusperoni]

@s-ovation you can use the setupItemView event instead, as that's the event that runs after the view is properly setup.

That said, it seems CD is running before it should (and angular is ignoring my .detach()...), so I'll change the logic around to ensure the view isn't created at all until we're ready to go.

Edit: what's worse is that it just works with no template because core generates a "default" template that takes precedence over our custom "default" template that creates a null view...