DEV Community: Adam

Angular: Better Loading Indicator Directive With CDK

Adam — Mon, 04 May 2026 15:34:51 +0000

In my last post I demonstrated how to make an Angular loading indicator without the CDK. In this post I will show you how to make an loading indicator using CDK that does not rely on observables and it supports promises and resources as well as observables.

Loading Component

Fist lets create our component that will simply contain the backdrop and indicator

loader-component.ts

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
    selector: 'app-loader',
    templateUrl: './loader-component.html',
    styleUrls: ['./loader-component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class LoaderComponent {}

loader-component.html

<div class="backdrop">
    <div class="lds-ripple">
        <div></div>
        <div></div>
    </div>
</div>

loader-component.scss

  .backdrop {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      background: rgba(160,160, 160, 0.3);
  }

  .lds-ripple {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }

  .lds-ripple div {
    position: absolute;
    border: 4px solid black;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  }

  .lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
  }

  @keyframes lds-ripple {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0;
        left: 0;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
  }

Loader

Now you need to create a directive that will accept a loader parameter that is either an Observable, Promise, or Resource and then it needs to display an overlay with the LoaderComponent in it that is positioned over the host element when it becomes visible

loader.ts

import { Directive, input, effect, Resource, inject, ElementRef, OnInit, signal, ComponentRef, OnDestroy } from '@angular/core';
import { Observable, Subscription } from 'rxjs';
import { OverlayRef, Overlay } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { LoaderComponent } from "./loader-component/loader-component";

@Directive({
    selector: '[loader]'
})
export class Loader implements OnInit, OnDestroy {
    loader = input<Observable<any> | Promise<any> | Resource<any> | null>(null);
    observer: IntersectionObserver | null = null;

    private host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
    private subscription: Subscription | null = null;
    private isVisible = signal(false);
    private overlay = inject(Overlay);
    private overlayRef: OverlayRef | null = null;

    private isAsync() {
        return this.loader() instanceof Observable || this.loader() instanceof Promise;
    }

    constructor() {
        effect(() => {
            const loader = this.loader();
            const isVisible = this.isVisible();
            this.subscription?.unsubscribe();

            if (loader) { 
                if (isVisible) {
                    if (!this.isAsync()) {
                        let resource = loader as Resource<any>;

                        if (resource.isLoading()) {
                            this.showLoader();
                        }
                        else {
                            this.hideLoader();
                        }
                    }
                    else if (loader instanceof Observable && !this.subscritpion) {
                        this.showLoader();
                        this.subscription = loader.subscribe({
                            next: () => this.hideLoader(),
                            error: () => this.hideLoader(),
                            complete: () => this.hideLoader()
                        });
                    }
                    else {
                        this.showLoader();
                        (loader as Promise<any>).then(() => this.hideLoader(), () => this.hideLoader());
                    }
                }
                else {
                    this.hideLoader();
                }
            }
            else {
                this.subscription = null;
                this.hideLoader();
            }
        })
    }

    ngOnInit() {
        this.observer = new IntersectionObserver(([entry]) => {
            this.isVisible.set(entry.isIntersecting || entry.target.checkVisibility()); // checkVisivibility for when scrolled out of view but still visible
        }, {
            root: null,
            rootMargin: '0px',
            threshold: 0.1
        });

        this.observer.observe(this.host);
    }

    ngOnDestroy() {
        this.hideLoader();
        this.observer?.disconnect();
        this.observer = null;
    }

    private showLoader() {
        if (!this.overlayRef) { 
            const positionStrategy = this.overlay
                .position()
                .flexibleConnectedTo(this.host)
                .withPositions([{ originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'top' }])
                .withFlexibleDimensions(false) 
                .withPush(false)               
                .withViewportMargin(8);

            this.overlayRef = this.overlay.create({
                positionStrategy,
                scrollStrategy: this.overlay.scrollStrategies.reposition(),
                width: this.host.offsetWidth,
                height: this.host.offsetHeight,
            });

            this.overlayRef.attach(new ComponentPortal(LoaderComponent));
        }
    }

    private hideLoader() {
        this.subscription?.unsubscribe();
        this.subscription = null;
        this.overlayRef?.dispose();
        this.overlayRef = null;
    }
}

The constructor creates an effect that will run any time that the value of the loader changes or when the visibility of the element changes. Also if the loader is a Resource it will run every time it's isLoading signal changes. It also unsubscribes for the observer subscription if there is one to make sure you don't have a rogue subscription incase loader's value changed. If loader is null it will call hideLoader to ensure that the loader is hidden incase it was shown when the value changed to null

In the effect it checks to see if the host element is visible an if it is not then hideLoader is called. If it is visible will check to see what type it is and execute one of the following actions based off the type.

If it is a resource it will show the loader if it's isLoading signal is true and hide the loader when it is false.
If it is an observable it will call showLoader and subscribe to it and call hideLoader on next, error, and complete.
If it is a promise it will call showLoader. It will call hideLoader when the promise resolves and on error

ngOnInit triggers an IntersectionObserver to check the host element's visibility. It will trigger every time the element's visibility in the view port changes.

showLoader creates an overlay that is positioned at the top left corner of the host element. It also resizes the overlay to the the host element's width and height. Then it creates component portal constructed with LoaderComponent and attaches it to the overlay. You need to have the width and height of your loader component set to 100% so it will stretch over the overlay.

hideLoader will unsubscribe from the observable's subscription if there is one and tears down the overlay.

ngOnDestroy calls hideLoader and tears down the intersection observer.

Cold Observables

A cold observable is an observable that get executed every time it get's subscribes to like the one from Angular's http client or the of rxjs operator. If you pass a cold observable to the Loader directive it will execute twice. To prevent this behavior pipe your observable through shareReplay.

let source = this.http.get<ResponseType>('https://api.your-site.com/your/url').pipe(shareReplay(1));

this.loader = source;

source.subscribe({
    next: (res) => { // ... do stuff ... }
});

Example

Angular: Create Loading Indicator Directive

Adam — Sun, 05 Oct 2025 13:14:15 +0000

Here I will be demonstrating how to create loader directive that has a back drop and an animated loading indicator that can be placed on any element and that does not use the CDK overlay.

Loader Component

First create a loader component that simply contains the loading indicator

loader.compponent.ts

@Component({
    selector: 'app-loader',
    templateUrl: './loader.component.html',
    styleUrls: ['./loader.component.scss']
})
export class LoaderComponent { }

loader.component.scss

.lds-ripple {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-ripple div {
    position: absolute;
    border: 4px solid black;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
}

@keyframes lds-ripple {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0;
        left: 0;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}

loader.component.html

<div class="lds-ripple">
    <div></div>
    <div></div>
</div>

Loader Directive

Now you need to make the directive. It will take an observable and display the loading component whenever the the input value changes and hide it when the observable resolves.

First lets create the directive that simply displays the loader.

loader.directive.ts

@Directive({
    selector: '[loader]'
})
export class LoaderDirective implements OnDestroy {
    private elmRef = inject(ElementRef);
    private appRef = inject(ApplicationRef);
    private subscription: Subscription | null = null;
    private backdrop: HTMLElement | null = null;
    private loaderRef: ComponentRef<LoaderComponent> | null = null;

    loader = input<Observable<any> | null>(null);

    private getRelativeContainer() {
        let elm: HTMLElement | null = this.elmRef.nativeElement;
        let style: CSSStyleDeclaration | null = elm ? window.getComputedStyle(elm) : null;

        while (style && style.position !== "relative" && elm) {
            elm = elm.parentElement;
            style = elm ? window.getComputedStyle(elm) : null;
        }

        return elm;
    }

    private showLoader() {
        this.backdrop = document.createElement("div");
        this.backdrop.style.display = "flex";
        this.backdrop.style.alignItems = "center";
        this.backdrop.style.justifyContent = "center";
        this.backdrop.style.position = "absolute";
        this.backdrop.style.height = this.elmRef.nativeElement.offsetHeight + "px";
        this.backdrop.style.width = this.elmRef.nativeElement.offsetWidth + "px";
        this.backdrop.style.backgroundColor = "rgba(50, 50, 50, 0.1)";

        let relElm = this.getRelativeContainer();

        if (relElm) {
           this.backdrop.style.top = relElm === this.elmRef.nativeElement ? "0px" : this.elmRef.nativeElement.offsetTop + "px";
           this.backdrop.style.left = relElm === this.elmRef.nativeElement ? "0px" : this.elmRef.nativeElement.offsetLeft + "px";
        }
        else {
            let eRct = this.elmRef.nativeElement.getBoundingClientRect();
            this.backdrop.style.top = eRct.top + "px";
            this.backdrop.style.left = eRct.left + "px";
        }

        let loader = document.createElement("app-loader");
        this.loaderRef = createComponent(LoaderComponent, {
            environmentInjector: this.appRef.injector,
            hostElement: loader
        });

        this.backdrop.appendChild(loader);
        this.elmRef.nativeElement.appendChild(this.backdrop);
    }

    private hideLoader() {
        if (this.loaderRef && this.backdrop) {
            this.backdrop.remove();
            this.loaderRef.destroy();

            this.loaderRef = null;
            this.subscription = null;
        }
    }

    constructor() {
        effect(() => {
            this.subscription?.unsubscribe();

            if (this.loader()) {
                this.showLoader();
                this.subscription = this.loader()?.subscribe({
                    next: () => this.hideLoader(),
                    complete: () => this.hideLoader(),
                    error: () => this.hideLoader()
                }) ?? null;
            }
            else {
                this.subscription = null;
                this.hideLoader();
            }
        });
    }

    ngOnDestroy() {
        this.subscription?.unsubscribe();
        this.hideLoader();
    }
}

The constructor uses effect to execute every time the loader input's value is changed. It will unsubscribe from the from the subscription if one exists. If loader is null it will set the subscription to null then make a call to hideLoader() in case the value was changed to null before the previous observable is resolved. If loader's value is an observable the loader is displayed and it subscribes to the observable with an observer that hides the loader when the observable resolves.

As you can see the showLoader() function creates a backdrop and styles it with it's positioning based on whether or not the host element for the directive is contained in a relatively positioned container. The width and the height are set to stretch over the host element entirely. Then it uses createComponent to dynamically create a loader component and attach it to the backdrop. Finally it attaches the backdrop to the host element.

hideLoader() removes the backdrop from the host element and destroys the component that was dynamically created in showLoader(). Then it unsets the subscription and the component ref.

This directive implements OnDestroy incase the loader observable has not resolved at the time that the directive gets destroyed.

Problem Hidden Element

If the host element is hidden when the loader's value is changed the backdrop will have a width and height of 0. So you will have to add functionality to the directive that will wait until the host element becomes visible and at the same time not display the loader if the observable has resolved at the time that the host element becomes visible. In order to do this additional observables and subscriptions are needed.

loader.directive.ts

@Directive({
    selector: '[loader]'
})
export class LoaderDirective implements OnDestroy {
    private elmRef = inject(ElementRef);
    private appRef = inject(ApplicationRef);
    private subscription: Subscription | undefined | null = undefined;
    private backdrop: HTMLElement | null = null;
    private loaderRef: ComponentRef<LoaderComponent> | null = null;
    private visible = new Subject<void>();
    private visSubscription: Subscription | null = null;
    private intervalSubscription: Subscription | null = null;
    private loaded = new Subject<void>();

    loader = input<Observable<any> | null>(null);

    private getRelativeContainer() {
        let elm: HTMLElement | null = this.elmRef.nativeElement;
        let style: CSSStyleDeclaration | null = elm ? window.getComputedStyle(elm) : null;

        while (style && style.position !== "relative" && elm) {
            elm = elm.parentElement;
            style = elm ? window.getComputedStyle(elm) : null;
        }

        return elm;
    }

    private checkVisibilitty() {
        this.intervalSubscription?.unsubscribe()
        this.intervalSubscription = interval(100).subscribe(() => { 
            if (this.elmRef.nativeElement.checkVisibility()) {
                this.visible.next();
                this.intervalSubscription?.unsubscribe();
            }
        });
    }

    private showLoader() {
        this.visSubscription?.unsubscribe();

        this.checkVisibilitty();

        this.visSubscription = this.visible.pipe(takeUntil(this.loaded)).subscribe(() => {
            this.backdrop = document.createElement("div");
            this.backdrop.style.display = "flex";
            this.backdrop.style.alignItems = "center";
            this.backdrop.style.justifyContent = "center";
            this.backdrop.style.position = "absolute";
            this.backdrop.style.height = this.elmRef.nativeElement.offsetHeight + "px";
            this.backdrop.style.width = this.elmRef.nativeElement.offsetWidth + "px";
            this.backdrop.style.backgroundColor = "rgba(50, 50, 50, 0.1)";

            let relElm = this.getRelativeContainer();

            if (relElm) {
                this.backdrop.style.top = relElm === this.elmRef.nativeElement ? "0px" : this.elmRef.nativeElement.offsetTop + "px";
           this.backdrop.style.left = relElm === this.elmRef.nativeElement ? "0px" : this.elmRef.nativeElement.offsetLeft + "px";
            }
            else {
                let eRct = this.elmRef.nativeElement.getBoundingClientRect();
                this.backdrop.style.top = eRct.top + "px";
                this.backdrop.style.left = eRct.left + "px";
            }

            let loader = document.createElement("app-loader");
            this.loaderRef = createComponent(LoaderComponent, {
                environmentInjector: this.appRef.injector,
                hostElement: loader
            });

            this.backdrop.appendChild(loader);
            this.elmRef.nativeElement.appendChild(this.backdrop);
        });
    }

    private hideLoader() {
        this.loaded.next();
        this.intervalSubscription?.unsubscribe();

        if (this.loaderRef && this.backdrop) {
            this.backdrop.remove();
            this.loaderRef.destroy();

            this.loaderRef = null;
            this.subscription = null;
        }
    }

    constructor() {
        effect(() => {
            this.subscription?.unsubscribe();

            if (this.loader()) {
                this.showLoader();
                this.subscription = this.loader()?.subscribe({
                    next: () => this.hideLoader(),
                    complete: () => this.hideLoader(),
                    error: () => this.hideLoader()
                }) ?? null;
            }
            else {
                this.subscription = null;
                this.hideLoader();
            }
        });
    }

    ngOnDestroy() {
        this.subscription?.unsubscribe();
        this.visSubscription?.unsubscribe();
        this.intervalSubscription?.unsubscribe();
        this.hideLoader();
    }
}

The checkVisibility() method will unsubscribe from the previous interval if one exists. This will insure that you don't have a rouge subscription when the loader value changes. Then it starts up an interval that runs every 100ms checking the visibility of the host element. When it becomes visible the method will resolve the visible observable and cancel the interval.

hideLoader() has been modified to resolve the the loaded observable one time to indicate that the loader observable has resolved.

The showLoader() method has been modified to unsubscribe from the previous visSubscription and to take the visible observable until the the loader/loaded observable has resolved. This will ensure that the loader is not displayed after they have been resolved. And the rest of the logic to the method is preformed after the host element becomes visible.

Http Observables

If you pass and observable from HTTPClient it will make 2 calls to your API URL because it is a cold observable. That means that the logic to the observable will only execute upon subscribing. You need to convert it to a hot observable in order to prevent recurring requests . In order to do that you need to pipe the HTTPClient observable to shareReplay. shareReplay shares a replay observable with the last x amount of values.

Example

...
this.loaderDirectiveValue = this.http.get<APIURLReturnType>('/your/api/url').pipe(shareReplay());
this.loaderDirectiveValue.pipe(take(1)).subscribe({
    next: data => {
        // logic for success 
    }
});
...

Important

If the loader directive is going to be contained in a scrollable element you need to set that element's position to "relative". If you do not the overlay will position it's self to where the element is at but it will attach to the nearest positioned ancestor which would be the body element if there are none and it will overlap the scrollable element.

Example

Here is an example of the loading indicator placed inside of a scrollable container

AngularJS ngBootstrap5

Adam — Sat, 03 Dec 2022 23:08:50 +0000

I finally finished this library in AngularJS I've been working on. its in AngularJS or Angular v1 because I was working on a project that was already done in Angular v1 and bootstrap doesn't have library for their Bootstrap v5 CSS. It's kind of like UI Bootstrap. Any way I put it out there for anyone like me that has to work with an Angular v1 project. You can get it here

ngBootstrap5 supports and adds convenience to:

Accordions
Collapse
Alert
Progress Bar
Tabs
Resolvable Modals
Tooltips with a template url
Compiled Popovers with a template url
Good Pagination
Star Rating Widget
A Datepicker made in entirely Bootstrap