ngAfterContentInit in ListView template component

[Serge-SDL]

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.

I think it's bug or I don't understand this behavior...

[Buuhuu]

This is due to the view recycling done by the native views. You can use ngOnChanges() callback if you want to get notified about views data binding has been changed. (Change detection is triggered by the list view component on the views created from the template(s)).

[Serge-SDL]

Thnak you very much, works for me !