Adding the loading component (spinner) to an Angular application
ngx-spinner is a loading (spinner) component library with more than 50 different types.
Before you start, you need to install and configure the tools:
Create the Angular application
1. Let’s create the application with the Angular base structure using the
@angular/cli with the route file and the SCSS style format.
2. Install and configure the Bootstrap CSS framework. Do steps 2 and 3 of the post Adding the Bootstrap CSS framework to an Angular application.
3. Install the
4. Import the
NgxSpinnerModule modules. Configure the log settings. Change the
app.module.ts file and add the lines as below.
5. Remove the content of the
AppComponent class from the
src/app/app.component.ts file. Import the
NgxSpinnerService service and create the
showSpinner method as below.
6. Remove the contents of the
src/app/app.component.html file. Add the
ngx-spinner component and the spinners options as below.
7. Run the application with the command below.
The application repository is available at https://github.com/rodrigokamada/angular-spinner.
This tutorial was posted on my blog in portuguese.