How to know when when the request to the server has ended with Angular2 and Firebase

Question

How to know when when the request to the server has ended with Angular2 and Firebase

Navigation

#1 by (2 votes)

2

I am using angularfire2 to communicate with the Google Firebase backend. This is the code:

import {Component} from '@angular/core';
import {AngularFire, FirebaseListObservable} from 'angularfire2';

@Component({
  selector: 'app',
  templateUrl: '
  <ul>
    <li *ngFor="let item in items | async">
      {{ item.name }}
    </li>
  </ul>
  ',
})
class AppComponent {
  items: Observable<any>;
  constructor(af: AngularFire) {
    this.items = af.database.list('/items');
  }
}

The af.database.list('items') instruction takes a few seconds to extract the information from Firebase.

Is there any way to know when the information is finished?

If I knew when the information has arrived I can show a "load bar" until the data arrives.

Thank you!

firebase typescript angularjs-2.0

asked by Matias999 15.07.2016 в 15:00

source

1 answer

Data persistence on Android Convert VARCHAR to VARBINARY (SQL)

score 2 · Accepted Answer

What returns af.database.list('/items') is a class called FirebaseListObservable that inherits from RxJS Observable so all methods of the observables are available for use.

The simplest way is to start with the active progress bar and remove it when anything comes to you. For this you can use the method subscribe

import {Component} from '@angular/core';
import {AngularFire, FirebaseListObservable} from 'angularfire2';
// Implementa la barra de progreso como un componente
import {ProgressBar} from 'myprogressbar';

@Component({
  selector: 'app',
  templateUrl: '
  <ProgressBar [active]="loading" />
  <ul>
    <li *ngFor="let item in items | async">
      {{ item.name }}
    </li>
  </ul>
  ',
  directives: [ProgressBar]
})
class AppComponent {
  item: Observable<any>;
  loading: boolean;
  constructor(af: AngularFire) {
    this.loading = true;
    this.items = af.database.list('/items');

    this.items.subscribe(data => {
        this.loading = false;
    });
  }
}