title: How can I display Firebase data on refreshing while using ion-refresher?
body: <p>I have some asynchronous data in my Firbase database.I have used <code>ion-refresher</code> in the .html file. But when I am adding new data to firebase database,then the data gets loaded there and is simultaneously displayed in the view.I cannot make use of <code>ion-refresher</code>.How can I make so?</p>
  
  <p>Code:</p>
  
  <h2>.html</h2>
  
  <pre><code>&lt;ion-content padding&gt;
     &lt;ion-refresher (ionRefresh)="doRefresh($event)"&gt;
        &lt;ion-refresher-content refreshingText="Refreshing..."&gt;
        &lt;/ion-refresher-content&gt;
        &lt;/ion-refresher&gt;
    &lt;ion-list&gt;
  
        &lt;ion-item *ngFor="let data of datas | async" class="pqr"&gt;
          &lt;ion-thumbnail item-left&gt;
            &lt;img src="assets/image/{{data.imageName}}"&gt;
          &lt;/ion-thumbnail&gt;
          {{data.Comp}}&lt;br&gt; {{data.Demand}}
          &lt;br&gt;
          &lt;p&gt; {{data.Desig}}&lt;br&gt;&lt;/p&gt;
          {{data.Place}}&lt;br&gt; {{data.when}}
          &lt;br&gt;
        &lt;/ion-item&gt;
  </code></pre>
  
  <h2>.ts</h2>
  
  <pre><code>export class HomePage implements OnInit {
    datas: FirebaseListObservable&lt;any[]&gt;;
    // datas: FirebaseListObservable&lt;Item[]&gt;;
  
    constructor(public navCtrl: NavController, public authData: AuthData, public af: AngularFire) {
      //this.loadData();
    }
    ngOnInit() {
      this.datas = this.af.database.list('/datas');
    }
  
     doRefresh(refresher) {
     console.log('Begin async operation', refresher);
  
    setTimeout(() =&gt; {
    console.log('Async operation has ended');
        refresher.complete();
      }, 2000);
     }
  </code></pre>