Angular CDK Overlay to one component

Question

I am trying to use the CDK Overlay to add a material spinner as a loading indicator over the top of a specific component. However, when I set hasBackdrop to true the entire application is grayed and disabled. I am trying to pass in the viewContainerRef from the component and am using connectedTo positioning. I can move the spinner location around, but not alter the area being disabled by the backdrop.

@Injectable()
export class WaitIndicatorService {

    overlayRef: OverlayRef;
    constructor(public overlay: Overlay) { }

    showSpinner(viewContainerRef: ViewContainerRef): void {
        const config = new OverlayConfig();

        config.positionStrategy = this.overlay.position()
/*             .global()
            .centerHorizontally()
            .centerVertically(); */

             .connectedTo(viewContainerRef.element,
            { originX: 'start', originY: 'bottom'},
            { overlayX: 'start', overlayY: 'bottom' });

        config.hasBackdrop = true;

        this.overlayRef = this.overlay.create(config);
        this.overlayRef.attach(new ComponentPortal(WaitSpinnerPanelComponent, viewContainerRef));
    }

    hideSpinner(): void {
        this.overlayRef.dispose();
    }
}

user_6454752 · Answer

What you miss in your code is the reference to the specific DOM element you're trying to attach the spinner to. You can pass that reference with the cdkOverlayOrigin directive and then attach the overlay to the overlayorigin.elementRef with config.hasBackdrop option set to false.

In the host component:



@ViewChild(OverlayOrigin) overlayrigin: OverlayOrigin;

In your spinner component:

showSpinner(viewContainerRef: ViewContainerRef, overlayorigin: OverlayOrigin): void {
...
config.positionStrategy = this.overlay.position()
             .connectedTo(overlayorigin.elementRef,
......

user_165393 · Answer

I found this blog entry: https://itnext.io/a-loader-for-your-components-with-angular-cdk-overlay-ebf5a4962e4d

You have to extend OverlayContainer with a new service and make the field _containerElement accessible:

public setContainerElement(containerElement: HTMLElement): void {
  this._containerElement = containerElement;
}

Then you have to extent Overlay with a new service and use your extended OverlayContainer in the constructor. Add a custom create function:

public createWithContainer(containerElement: HTMLElement, options): OverlayRef {
    this._myOverlayContainer.setContainerElement(containerElement);
    return super.create(options);
}

Angular CDK Overlay to one component

2 Answers