V4.0.0-beta.13 - VirtualScroll doesn't call ngOnInit of all its children

[JumBay]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)             : 4.2.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.13
   @angular-devkit/build-angular : 0.8.6
   @angular-devkit/schematics    : 0.8.6
   @angular/cli                  : 6.2.6
   @ionic/angular-toolkit        : 1.0.0

System:

   NodeJS : v8.12.0 (/usr/local/bin/node)
   npm    : 6.4.1
   OS     : macOS

Describe the Bug
Just run this simple code on a fresh project:

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

@Component({
  selector: 'app-root',
  template: `
  <ion-app>
      <ion-content>
        <ion-list>
            <ion-virtual-scroll [items]="movies" approxItemHeight="44px">
              <app-movie *virtualItem="let item" [title]="item"></app-movie>
            </ion-virtual-scroll>
        </ion-list>
      </ion-content>
  </ion-app>
`
})
export class AppComponent implements OnInit {
  movies: string[] = [];

  ngOnInit() {
    for (let i = 0; i < 1000; i++) {
      this.movies.push(`The Movie ${i}`);
    }
  }
}

@Component({
  selector: 'app-movie',
  template: `
  <ion-item>{{title}}</ion-item>
`
})
export class MovieComponent implements OnInit {
  @Input()
  title: string;

  ngOnInit() {
    console.log('On Init', this.title);
  }
}

If you check your console, you'll notice the ngOnInit() method is not called for all MovieComponent, only some of them

[paulstelzer]

Thanks for your issue! Could you please check if this is still an issue in beta.17? That would be very nice :)

[JumBay]

Same issue on beta.17

[JumBay]

I still facing this issue on beta.19

[manucorporat]

@JumBay the fix was merged but not released :)

[manucorporat]

@JumBay I misunderstood the problem, I think this is the expected behaviour. Virtual-scroll creates a set of components then it reuses, is it not that the point of a virtual-scroll?

Your component should be stateless if you want to use it with virtual-scroll, only depending in the inputs the component has.

[paulstelzer]

As @manucorporat says - the components will be reused. So ngOnInit will not be called (the component already exist). Virtual scroll only create components who are necessary to fill the viewport.

So you have to look for the changes of this component

ngOnChanges(changes) {
   console.log('CHANGES', changes.title.currentValue);
}

And then you will see it :) I also need some time to understand it. So keep in mind: Components are REUSED!

[JumBay]

Thanks that's what I thought and I updated my code in this direction.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.