fix(angular): virtual-scroll (#16729)

fixes #16725
fixes #16432
fixes #16023
fixes #14591
fixes #16050
fixes #15587

angular/test/test-app/src/app/app-routing.module.ts

@@ -9,6 +9,8 @@ import { TabsComponent } from './tabs/tabs.component';
 import { TabsTab1Component } from './tabs-tab1/tabs-tab1.component';
 import { TabsTab1NestedComponent } from './tabs-tab1-nested/tabs-tab1-nested.component';
 import { TabsTab2Component } from './tabs-tab2/tabs-tab2.component';
+import { VirtualScrollComponent } from './virtual-scroll/virtual-scroll.component';
+import { VirtualScrollDetailComponent } from './virtual-scroll-detail/virtual-scroll-detail.component';
 
 const routes: Routes = [
   { path: '', component: HomePageComponent },
@@ -16,6 +18,9 @@ const routes: Routes = [
   { path: 'modals', component: ModalComponent },
   { path: 'router-link', component: RouterLinkComponent },
   { path: 'router-link-page', component: RouterLinkPageComponent },
+  { path: 'virtual-scroll', component: VirtualScrollComponent },
+  { path: 'virtual-scroll-detail/:itemId', component: VirtualScrollDetailComponent },
+
   { path: 'tabs', redirectTo: '/tabs/account', pathMatch: 'full' },
   {
     path: 'tabs',

angular/test/test-app/src/app/app.module.ts

@@ -15,6 +15,9 @@ import { TabsComponent } from './tabs/tabs.component';
 import { TabsTab1Component } from './tabs-tab1/tabs-tab1.component';
 import { TabsTab2Component } from './tabs-tab2/tabs-tab2.component';
 import { TabsTab1NestedComponent } from './tabs-tab1-nested/tabs-tab1-nested.component';
+import { VirtualScrollComponent } from './virtual-scroll/virtual-scroll.component';
+import { VirtualScrollDetailComponent } from './virtual-scroll-detail/virtual-scroll-detail.component';
+import { VirtualScrollInnerComponent } from './virtual-scroll-inner/virtual-scroll-inner.component';
 
 @NgModule({
   declarations: [
@@ -28,7 +31,10 @@ import { TabsTab1NestedComponent } from './tabs-tab1-nested/tabs-tab1-nested.com
     TabsComponent,
     TabsTab1Component,
     TabsTab2Component,
-    TabsTab1NestedComponent
+    TabsTab1NestedComponent,
+    VirtualScrollComponent,
+    VirtualScrollDetailComponent,
+    VirtualScrollInnerComponent
   ],
   imports: [
     BrowserModule,

angular/test/test-app/src/app/home-page/home-page.component.html

@@ -27,5 +27,10 @@
           Tabs test
         </ion-label>
       </ion-item>
+      <ion-item routerLink="/virtual-scroll">
+        <ion-label>
+          Virtual Scroll
+        </ion-label>
+      </ion-item>
     </ion-list>
   </ion-content>

angular/test/test-app/src/app/virtual-scroll-detail/virtual-scroll-detail.component.html

@@ -0,0 +1,17 @@
+<ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button></ion-back-button>
+      </ion-buttons>
+      <ion-title>virtual-scroll page</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content padding>
+    <h1>Item {{itemNu}}</h1>
+    <p>ngOnInit: <span id="ngOnInit">{{onInit}}</span></p>
+    <p>ionViewWillEnter: <span id="ionViewWillEnter">{{willEnter}}</span></p>
+    <p>ionViewDidEnter: <span id="ionViewDidEnter">{{didEnter}}</span></p>
+    <p>ionViewWillLeave: <span id="ionViewWillLeave">{{willLeave}}</span></p>
+    <p>ionViewDidLeave: <span id="ionViewDidLeave">{{didLeave}}</span></p>
+  </ion-content>

angular/test/test-app/src/app/virtual-scroll-detail/virtual-scroll-detail.component.ts

@@ -0,0 +1,45 @@
+import { Component, NgZone, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-virtual-scroll-detail',
+  templateUrl: './virtual-scroll-detail.component.html',
+})
+export class VirtualScrollDetailComponent implements OnInit {
+
+  onInit = 0;
+  willEnter = 0;
+  didEnter = 0;
+  willLeave = 0;
+  didLeave = 0;
+
+  itemNu = 'none';
+
+  constructor(private route: ActivatedRoute) {}
+
+  ngOnInit() {
+    this.itemNu = this.route.snapshot.paramMap.get('itemId');
+    NgZone.assertInAngularZone();
+    this.onInit++;
+  }
+
+  ionViewWillEnter() {
+    if (this.onInit !== 1) {
+      throw new Error('ngOnInit was not called');
+    }
+    NgZone.assertInAngularZone();
+    this.willEnter++;
+  }
+  ionViewDidEnter() {
+    NgZone.assertInAngularZone();
+    this.didEnter++;
+  }
+  ionViewWillLeave() {
+    NgZone.assertInAngularZone();
+    this.willLeave++;
+  }
+  ionViewDidLeave() {
+    NgZone.assertInAngularZone();
+    this.didLeave++;
+  }
+}

angular/test/test-app/src/app/virtual-scroll-inner/virtual-scroll-inner.component.html

@@ -0,0 +1,3 @@
+<p>
+  [{{onInit}}] Item {{value}}
+</p>

angular/test/test-app/src/app/virtual-scroll-inner/virtual-scroll-inner.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit, NgZone, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-virtual-scroll-inner',
+  templateUrl: './virtual-scroll-inner.component.html',
+})
+export class VirtualScrollInnerComponent implements OnInit {
+
+  @Input() value: string;
+  onInit = 0;
+
+  ngOnInit() {
+    NgZone.assertInAngularZone();
+    this.onInit++;
+    console.log('created');
+  }
+}

angular/test/test-app/src/app/virtual-scroll/virtual-scroll.component.html

@@ -0,0 +1,21 @@
+
+<ion-header>
+  <ion-toolbar>
+    <ion-title>
+      Virtual Scroll Test
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <ion-virtual-scroll [items]="items" [headerFn]="myHeaderFn" [footerFn]="myFooterFn">
+    <ion-item-divider *virtualHeader="let header">{{ header }}</ion-item-divider>
+    <ion-item-divider *virtualFooter="let footer">-- {{ footer }}</ion-item-divider>
+    <ion-item *virtualItem="let item" [routerLink]="['/', 'virtual-scroll-detail', item]">
+      <ion-label>
+        <app-virtual-scroll-inner [value]="item"></app-virtual-scroll-inner>
+      </ion-label>
+      <ion-icon *ngIf="(item % 2) === 0" name="airplane" slot="start"></ion-icon>
+      <ion-toggle slot="end" [checked]="(item % 2) === 1"></ion-toggle>
+    </ion-item>
+  </ion-virtual-scroll>
+</ion-content>

angular/test/test-app/src/app/virtual-scroll/virtual-scroll.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { HeaderFn } from '@ionic/core';
+
+@Component({
+  selector: 'app-virtual-scroll',
+  templateUrl: './virtual-scroll.component.html',
+})
+export class VirtualScrollComponent {
+
+  items = Array.from({length: 1000}, (_, i) => i);
+
+  myHeaderFn: HeaderFn = (_, index) => {
+    if ((index % 10) === 0) {
+      return `Header ${index}`;
+    }
+  }
+
+  myFooterFn: HeaderFn = (_, index) => {
+    if ((index % 5) === 0) {
+      return `Footer ${index}`;
+    }
+  }
+}