Adding Preloaders to Components
Learn to add a loader to an Angular project.
Introduction to ngx-spinner
While building a web application, we’ll encounter scenarios where we have to fetch data from a back-end resource. This process is asynchronous in nature, making it necessary to use a preloader. A preloader is a static picture or animated figure displayed on the browser while an application is loading in the background. The preloader disappears once the data fetched on the application is ready.
In this project, we’ll use the npm
package called ngx-spinner
to set up our preloader. The ngx-spinner
is an npm
package well suited for Angular, and it has features such as the following:
- Configuration option through service injection
- Full screen mode (optional)
- Multiple loaders
- Promised-based response using the
show()
andhide()
methods
Note: We can follow the instructions in the appendix to install
ngx-spinner@11.0.2
to our application.
Get hands-on with 1400+ tech skills courses.