Implementing a Component Overlay Loader With Angular CDK | by Silvère Marie | Jun, 2022

Be UX-friendly by including a loader to your parts

In most net functions information is loaded from a server. It may be photos, movies, plain textual content, or another type of information. Whereas retrieving that info the consumer must be knowledgeable with a visible indicator.

In a earlier article referred to as “Implementing a page overlay loader with Angular CDK” we constructed a service that exhibits a element on high of the entire web page to tell the consumer and stop interplay whereas loading. This method solves the issue by notifying the consumer with a loader within the middle of the display screen. Nonetheless, it may be annoying for the consumer as a result of it blocks the interplay with different content material.

That’s the reason this text is about including a loader on high of a element to tell the consumer and letting the consumer work together with different parts whereas loading.

For constructing the brand new loader we’re going to reuse the service we previously built which is answerable for exhibiting and hiding a loader as under.

Should you haven’t learn the earlier article don’t fear it’s really helpful nevertheless it’s not a requirement. You simply have to have a look a the next service and proceed studying.

That is the service that we beforehand construct. It’s answerable for exhibiting and hiding a web page loader by utilizing an overlay offered by Angular Materials CDK.

The overlay invokes our LoaderComponent which is a element that encapsulates the CSS loader animation offered by

In an effort to change from the web page overlay to the element overlay we’d like the reference of the focused element. A method of doing that is by remodeling our service into an attribute directive that can be connected to the focused element.

For individuals who don’t know, an attribute directive is an angular idea that “Modifications the looks or conduct of DOM components and Angular parts”. If you wish to know extra about this matter I recommend studying the official documentation.

For changing our service with a directive we should change the angular configuration and change the @Injectable with @Directive.

Since we transfer out from a service, we have to declare and export our directive in a Module. We might do it in our AppModule however let’s create a devoted module in an effort to keep away from having a giant and unmaintainable AppModule.

Subsequent, we connect the directive to the element and go the observable to the directive in an effort to know when to point out and conceal the loader.

For instance, we are going to connect the directive to an Angular Material table.

As well as, we must always declare the enter contained in the directive.

Let’s present the loader when the info is requested and subscribe to our observable to know when the info is delivered for hiding the loader.

Now that we’re passing the observable to the directive we now have two subscriptions. One subscription from the async pipe and one other one from our directive. This results in a double HTTP name, one per subscription.

For mitigating this aspect impact we are able to use the RxJs operator ReplaySubject and remodel our observable from chilly to scorching. If you wish to dig extra into this matter, I recommend studying the article Hot vs Cold Observables by Ben Lesh.

We lastly remodel our service right into a directive. All is working as earlier than and we now have the reference of the focused element for altering the loader place technique.

Now that we use a directive, we are able to inject the element reference to alter the loader positionStrategy from world to native.

Let’s hyperlink the overlay place to the elementRef utilizing the flexibleConnectedTo with the middle place. Additionally, we are able to take away the hasBackdrop for letting the consumer work together with the opposite parts.

Congrats! We lastly convert our web page loader to a element loader.

Now you can connect the loader to all parts you need and it’ll render the identical!

As software program builders, we are inclined to suppose that it’s completed after we cowl the completely satisfied path.

Nonetheless, for producing high-quality software program we must always suppose and canopy the sting instances. That’s the reason we’re going to see how the loader behaves when scrolling.

As you’ll be able to see after we are scrolling the element is transferring however not the loader which is caught within the preliminary place. This isn’t the anticipated conduct. In reality, the loader ought to comply with the element when it strikes.

For fixing this difficulty we are able to use the scrollStrategy reposition. That implies that after we scroll, it is going to reposition the overlay to suit properly with the offered place.

Nonetheless, this isn’t sufficient. If we scroll till our element disappears the loader must be hidden. For that, we are able to disable the function named withPush.

The scrolling drawback is fastened and our loader works as anticipated!

More Posts