ngAfterContentInit in ListView template component


#1

Hi!
I found a strange behavior with ListView I can’t understand it…
If I have created a very basic list :

  template: `
    <ListView [items]="rows" (itemTap)="onItemTap($event)">
      <ng-template let-item="item" let-i="index">
        <list-with-picture-template-cmp [document]="item"></list-with-picture-template-cmp>
      </ng-template>
    </ListView>
  `,

With a simple component as template:

import { Component, Input, AfterContentInit } from '@angular/core';

@Component({
  selector: "list-with-picture-template-cmp",

  template: `
  <GridLayout style="background-color: white" columns="auto, *">
      <Label text="{{ document.designation }}"></Label>
  </GridLayout>
  `
})
export class ListWithPictureTemplateComponent implements AfterContentInit {

  @Input() document: any;

  ngAfterContentInit() {
    console.log('ListWithPictureTemplateComponent - ngAfterContentInit');
  }
}

When I log ngAfterContentInit, I see that the function is called only for the initialy displayed elements. When I move the mouse to reach other elements, the ngAfterContentInit is called on more time for the first next element but that’s it, no more call no matter how long is the list. It’s a problem because I need to execute some code for each element in the list.

Do anyone have an idea why?

I have maybe found another solution to execute code in each element by adding in ListView:
(setupItemView)="onSetupItemView($event)

And a function:

  onSetupItemView(args: SetupItemViewArgs) {
    console.log('onSetupItemView');
  }

But I can’t find a way to execute a function in my template component starting from this “args” arguments.
Do anyone know how to perform that?

Thanks !
Serge


#2

Find the answer with a question on github: https://github.com/NativeScript/nativescript-angular/issues/883#issuecomment-314036243