[Virtual Scroll] Child Component requires ion-content

Ionic Framework ionic-v3
1

When loading a child component with a virtual scroll element, you need to declare <ion-content> tags around it explicitly even within its parent ion-content tags.

Here is the code:

<ion-header class="main-header">
  <ion-navbar hideBackButton class="main-navbar">
    <ion-buttons left>
        <button ion-button navPop icon-only>
            <ion-icon ios="ios-arrow-back" md="md-arrow-back"></ion-icon>
        </button>
    </ion-buttons>
    <button ion-button icon-only menuToggle>
          <ion-icon name='menu'></ion-icon>
      </button>
    <ion-title>
      Clients
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content> <----HERE
  <client-list     <----child component
    [clients]="clients$ | async"
    [isLoading]="isLoading$ | async"
    (selectEvent)="onSelect($event)"
  ></client-list>
</ion-content>

child.html

<ion-header class="main-header">
  <ion-navbar hideBackButton class="main-navbar">
    <ion-buttons left>
        <button ion-button navPop icon-only>
            <ion-icon ios="ios-arrow-back" md="md-arrow-back"></ion-icon>
        </button>
    </ion-buttons>
    <button ion-button icon-only menuToggle>
          <ion-icon name='menu'></ion-icon>
      </button>
    <ion-title>
      Clients
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="client"> <--------2nd Ion-content
	<ion-list  [virtualScroll]="filteredClients" approxItemHeight="'80px'"> 
		<ion-item *virtualItem="let client" (click)="select(client)">
			<client-list-element [client]="client"></client-list-element>
		</ion-item>
	</ion-list>
</ion-content>

We are having a serious memory leak issue, and I think this may be a culprit in the issue.

I forgot to mention, if I dont put that second ion-content element in the child, virtual scroll does not work. Renders a white screen.

2 Likes