Ion-virtual-scroll does not render element when combined with ng-template

Hello all,
Lately I have been trying to implement a custom generic virtual scroll component combined with an infinite scroll.
I tried to make it generic, in a way that, in my virtual scroll component’s inputs, there’s a variable named templateName, that is the template that will be rendered in the virtual-scroll.
But I’m having this error that I can’t seem to understand correctly… :

index-7a8b7a1c.js:1938 Error: virtual element was not created
    at getElement (ionic-angular.js:3440)
    at ionic-angular.js:3376
    at ZoneDelegate.invoke (zone-evergreen.js:364)
    at Object.onInvoke (core.js:28574)
    at ZoneDelegate.invoke (zone-evergreen.js:363)
    at Zone.run (zone-evergreen.js:123)
    at NgZone.run (core.js:28458)
    at IonVirtualScroll.nodeRender (ionic-angular.js:3372)
    at doRender (ion-virtual-scroll.entry.js:79)
    at VirtualScroll.writeVS (ion-virtual-scroll.entry.js:421) undefined

Here’s some fragments of my code :
virtual-scroll.component.ts

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

@Component({
  selector: 'app-virtual-scroll',
  templateUrl: './virtual-scroll-generic.component.html',
  styleUrls: ['./virtual-scroll-generic.component.scss']
})
export class VirtualScrollGenericComponent implements OnInit {
  @Input() items: any[];

  @Input() itemHeight: string;

  @Input() scrollThreshold: string;

  @Input() templateName: TemplateRef<any>;

  @Input() onScrollStart: EventEmitter<void> = new EventEmitter<void>();

  ngOnInit(): void {
    console.log(this);
  }

  infiniteScroll(): void {
    this.onScrollStart.emit();
  }
}

virtual-scroll.component.html

<ion-virtual-scroll [items]="items" [approxItemHeight]="itemHeight">
  <ng-container *virtualItem="let item">
    <ng-container
      [ngTemplateOutlet]="templateName"
      [ngTemplateOutletContext]="{ item: item }"
    ></ng-container>
  </ng-container>
</ion-virtual-scroll>

<ion-infinite-scroll
  [threshold]="scrollThreshold"
  (ionInfinite)="infiniteScroll()"
>
  <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading..">
  </ion-infinite-scroll-content>
</ion-infinite-scroll>

Here’s the component where virtual-scroll component is being called

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title> Virtual Scroll </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Virtual Scroll</ion-title>
    </ion-toolbar>
  </ion-header>

  <ng-template #template let-item="item">
    <ion-item detail="true">
      <ion-label>
        <h2>{{ item.name }}</h2>
      </ion-label>
    </ion-item>
  </ng-template>

  <app-virtual-scroll
    [items]="items"
    itemHeight="80px"
    scrollThreshold="100px"
    (onScrollEvent)="loadData()"
    [templateName]="template"
  ></app-virtual-scroll>
</ion-content>

I also made a repository, that you can clone over here : GitHub - canserkanuren/virtual-scroll-generic

If anyone of you understands why, could you possibly give me some hints about the ongoing problem ?
Thanks a lot.

3 posts - 2 participants

Read full topic