In this Article, I’m going to show you how to utilize “ngx-ul loader library” to add modern, beautiful animated Pre-loaders in angular js application so let’s start step by step
Step 1:- Open NPM terminal and move to project folder by using simple command “cd project-name”.
Step 2:- Type command “npm i ngx-ui-loader” to install ngx-ui-loader to angular project.
Step 3:- Just Type command “npm start” to start angular Project.
Step 4:- Import the “NgxUiLoaderModule” Module in your root application module named as “app.module.ts”.
Step 5:- After importing the “NgxUiLoaderModule”, use “ngx-ui-loader component” in your template.
Step 6:- Add “NgxUiLoaderService” service wherever you want to use the ngx-ui-loader. In our case, we are showing ngx-ui loader on application start/load.
Step 7:- Implement “ngOnInit” method and call Start() function to start ngx-ui loader and Stope() function to stop ngx-ui loader.
There are two main methods to show and hide the “ngx-ui loader”.
Start():- Function used to start “ngx-ui loader”
Stop():- Function used to stop “ngx-ui loader”
Amazing, “ngx-ui loader” is working perfectly.
Ngx-ui Loader Customization:
In order to change loader shape,loader color,progress bar color, loader position, add text along loader we need to configure ngx-ui loader by passing single object to “NgxUiLoaderModule” in app.module.ts
You can apply properties on ngx-ui loader and pick up your desired object from this link(https://tdev.app/ngx-ui-loader/demo/) and pass to “NgxUiLoaderModule” in app.module.ts
“ngx-ui loader” library is modern, animated , powerful js library to add beautiful loader in angular project
Thank you for reading this Article. If you find this Article helpful then don’t forget to press clap icon. Share this Article to help others and follow me for getting things always first in simple way.
