Ionic2 “ionViewDidEnter” method is very slow first time


Can you tell me why below functionality has huge delay on first-time load? On 2nd time where it is normal.The same delay is on the actual device too.Please see the attached video.

Note : The issue here is firebase bind “this.eventData.getEventList().on(‘value’, snapshot => {}” When I remove it all are working fine.Do you know how to do it differently?

Video: Video about this issue


<ion-card *ngFor="let event of eventList" (click)="goToEventDetail(" color="secondary">
      <p>Event Name: <strong>{{event?.name}}</strong></p>
      <p>Ticket: <strong>${{event?.price}}</strong></p>
      <p>Cost: <strong>${{event?.cost}}</strong></p>
      <p>Date: <strong>{{event?.date}}</strong></p>


import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { EventDetailPage } from '../event-detail/event-detail';
import { EventData } from '../../providers/event-data';

  selector: 'page-event-list',
  templateUrl: 'event-list.html',

export class EventListPage {
  public eventList: any;
  constructor(public navCtrl: NavController, public eventData: EventData) {


  ionViewDidEnter() {
    this.eventData.getEventList().on('value', snapshot => {
      let rawList = [];
      snapshot.forEach(snap => {
          id: snap.key,
          name: snap.val().name,
          price: snap.val().price,
          cost: snap.val().cost,
          date: snap.val().date
      this.eventList = rawList;

I’ve had unexpected behavior when putting an Angular directive inside <ion-card>. First suggestion: wrap your card in a div, and use *ngFor inside the div.

Second, you don’t say what your EventData provider is doing. Maybe it takes a while to fetch the data, but once it has data in cache, it can render the page faster. So your provider is important.

Third, I think you should consider refactoring your code so you’re subscribing to an Observable in ngOnInit() instead of what you’re doing now. I’ve found that to be faster.

1 Like

Hi @AaronSterling,

Yes, You’re right.I have implemented this using AngularFire2 with Observables and no problem at all.Thanks :slight_smile: