Loading Spinners for Asynchronous Firebase Data

From the creator

https://angularfirebase.com/lessons/show-loading-spinners-for-firebase-data/ In this episode, I will show you how to display and hide a loading spinner when retrieving asynchronous Firebase data from an Angular application. Loading indicators are an important UI feature because they show the end user when more data is incoming. Step 1 - Create the Spinner component We're going to create a SpinnerComponent that can be reused throughout the application. To make it look cool, I am using Spinkit CSS library, which we can just be copied directly into the component's CSS and HTML files. You do not need to change anything in the component's TypeScript. Step 2 - Retrieve Aschronous Data We need to load some data from Firebase to make use of the spinner. In this example, I am loading a `FirebaseListObservable` via the AngularFire2 package. The actual data is just and array of items from a to-do list. This code was originally created for the RealTime Database video, so check that out if you want to learn more about asynchronous data streams. Step 3 - Show and Hide the Spinner We want to show the spinner in the items-list component while data is being retried. First, we define a variable called `showSpinner` in the component and set it to true by default. During `ngOnInit`, the data is requested from the service as a `FirebaseListObservable`. We can determine if the data has been loaded by subscribing to it. The function inside the subscribe call will be executed after t

Published 2017-05-01 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.