CODEWITHSUNDEEP
angularoverlayangular-cdk
user2178025
user2178025

Reputation: 184

Angular CDK Overlay to one component

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

Upvotes: 3

Views: 11994

Answers (2)

Zappi
Zappi

Reputation: 451

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

Upvotes: 0

RedDree
RedDree

Reputation: 379

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,
......

Upvotes: 1

Related Questions