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 the observable emits data, so we can simply set `showSpinner` variable to false when this happens.
In the template, we can use the `*ngIf` directive with the `showSpinner` variable to control the visibility spinner.
Going back to the app, we can see that spinner is visible for a split second before the data is loaded. The longer it takes for your data the load, the more useful this spinner will be your end users.
Xem thêm Bài Viết:
- Chia sẻ đầy đủ về cách hướng dẫn Ghost Win Xp bằng USB cơ bản từ A tới Z
- Hướng dẫn tạo file ghost win 10 thông qua 3 bước đơn giản mà bạn không nên bỏ qua
- Mách bạn 4 bước trong cách bung file tib theo chuẩn UEFI đơn giản nhất
- Mật bí 4 kiểu hyperlink trong excel bị lỗi phổ biến mà bạn hay gặp nhất
- Khái niệm ma alt là gì và cách sử dụng bảng mã ATL như thế nào?