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();
    }
}

Answer 1

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:

<div cdkOverlayOrigin #overlayorigin="cdkOverlayOrigin"></div>

@ViewChild(OverlayOrigin) overlayrigin: OverlayOrigin;

In your spinner component:

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