Angular 5 Loader Component — It’s simple

Hi everyone ! I’ve decided to create it because when I needed something like that, I didn’t find one good article. This one will tell you how to create a simple loader component from A to Z.

Let’s begin.
First of all we need to create a module which contains a loader component and other related things.

ng g m loader

Inside loader module we should create loader component & loader service.

ng g c loader
ng g s loader

Declare and export LoaderComponent , add LoaderService in providers.
Our module should look like the one from this example.

Loader Module

Now let’s create the loader itself. You can make your personal loader, but I will use an example from google.

Demo (with code)

It will be nice for you to use this loader. When you understand how it works, you will adapt the loader to your project.

You just need to copy markup and styles.

Please put class instead of id in your markup.
We’ll have two types of loader — global which will be on full screen and secondary which will appear inside an element. For this, create two new classes global and secondary .

I adopted css in scss.(If you need css please use code from demo).Your markup and styles probably looks like the one from this examples.

Loader Component Template

Loader Component Styles

Create Loader Service Logic

Inside loader.service.ts we need to create an BehaviorSubject which contains loader’s id and status .

In our service we have just two methods. First method is showLoader(id) which has parameter id , by default id is global . It means — if we call showLoader() without id , we automatically will call global loader which will fill the whole screen.
Another method is vice versa ,hideLoader(id) just hides active loader.

We need to understand when we show and hide loader. Observable will solve this issue.loaderStatus$ is our Observable to which we can subscribe and make show/hide actions in LoaderComponent.

Create loader model

Create a new file loader.model.ts which contains loader interface.

export interface Loader {
  id: string;
  status: boolean;
}

Connect Component with Service

In our component we should inject our service in constructor . Create two variables: id with @Input decorator and show which displays and hides our loader.

We use @Input decorator because we need to give id for each loader that we create.

In ngOnInit() lifecycle we subscribe to loaderStatus$ .

To use multiple loaders we need to make a lot of validations. First one: check if loader’s id is equal with id which we receive from loaderStatus$ . Second validation: we check loader status .

If all validations are passed, then we show loader.

“We can see the fruits of our effort”

Now, to use loader we just need to use it in our template and call. After injecting loader service in constructor , to show loader use showLoader() method.

// Template
<app-loader></app-loader>
// TypeScript
this.loaderService.showLoader();

If you want to have multiple loader’s in your component just put id for each loader.

<div class="loaders">
  <div class="first">
    <app-loader [id]="'first'"></app-loader>
    <h1>First container</h1>
  </div>
  <div class="second">
    <app-loader [id]="'second'"></app-loader>
    <h1>Second container</h1>
  </div>
</div>

Remember — first and second classes should have position: relative ;

Send loader’s id in showLoader method to show loader.

this.loaderService.showLoader('first');

GitHub project, to see full example.

Thanks for attention, waiting for your feedback.