Virtual Scroll not working in tab



I’d like to use virtual scroll because I have a long list with images. But I don’t manage to make it work. My items are not displayed with virtual scroll but they are when I use ngFor.

<div [virtualScroll]="items" >
    <div *virtualItem="#item" > hey {{item.nom}}</div>	

My items array contains instances of a custom class but I tried to use an array of strings and it didn’t change anything. They are loaded from an http request when the pages inits. This happens inside of a tab. Am I missing something about how to use virtual scroll ?



Seems to work for me so far.

import {Page} from 'ionic-angular';
  template: `
  <ion-navbar *navbar>
  <ion-title>Tab 1</ion-title>

  <ion-list [virtualScroll]="items">

    <ion-item *virtualItem="#item">


export class Page1 {
  public items = [];
  constructor() {
    for (let i = 0; i < 1000; i++) {

Well after successfully crashing my computer, turns out to an issue with elements not having a set height. Could you open an issue for this on github?


I added an issue based on what you said (I didn’t face it) :

The list is displayed when the array is populated in the constructor but not when it is populated from the callback of an http request:

export class MyPage {
    items = [];

  constructor(nav: NavController, private _service: Service)

  getItems() {
                     res => {  for(let i=0; i<30; i++){
                     error =>  console.log(error));


and in the service:

getRestos () {
    return this.http.get(this._url)
                    .map(res => <CustomItem[]> res.json().data )