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.
That’s it for loading spinners, see you next time.
Nguồn: https://quydinh.com
Xem thêm bài viết khác: https://quydinh.com/cong-nghe
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?
Nice video
what about unsubscribing from subscription?
How to make it full screen ?
You should create courses in Udemy, I will be happy to pay you and learn end to end app development.
works beautifully! appreciate your time n effort mate 🙂
What css used you?
thank's for the video.
but the way you did it, once it is set it will never go back. how would you get it to display again if the observable changes. I did something similar, with an if statement but it's not getting set.
Thank you! I am glad I opened Your channel
.
Short and to the point!
Error: Template parse errors:
'loading-spinner' is not a known element:
1. If 'loading-spinner' is an Angular component, then verify that it is part of this module.
2. If 'loading-spinner' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<loading-spinner *ngIf = "showSpinner"></loading-spinner>
how do i resolve this?
man your videos are short with solid content, thx
great
where is css file ?
That background music is way catchy. What is it??
Great tutorial as usual! Could you cover how to adapt this to show a spinner on overall app startup?
great tutorial. make the spinner work in no time
Awesome videos
Awesome, as always!
thanks buddy
Another excellent and easy to follow video. Doing it this way occurred to me but I was concerned about the whole memory leak thing and unsubscribing. Do you suggest unsubscribing? Or does AF2 handle this ok? Can't seem to find much about the do's and don't of subscribing to these.