0

I tried to change position where cdk-overlay-container is placed:

@Injectable({ providedIn: 'root' })
export class CustomOverlayContainer extends OverlayContainer {
    constructor(@Optional() @Inject(DOCUMENT) _document: any) {
        super(_document);
        this._createContainer();
    }

    getContainerElement() {
        return this._containerElement;
    }

    protected _createContainer(): void {
        const containerClass = 'cdk-overlay-container';
        const previousContainers = document.getElementsByClassName(containerClass);

        // If there is already a container (can happen in a Microfrontend scenario with
        // multiple self-contained Angular apps on the same website), reuse that. But
        // clean it up because it could be created while transitioning from server
        // to client (Angular Universal) and may be stale. Remove any additional containers.
        for (let i = 0; i < previousContainers.length; i++) {
            while (i === 0 && previousContainers[i].firstChild) {
                previousContainers[i].removeChild(previousContainers[i].firstChild);
            }

            if (i > 0 && !!previousContainers[i].parentNode) {
                previousContainers[i].parentNode.removeChild(previousContainers[i]);
            }
        }

        if (previousContainers.length > 0) {
            this._containerElement = previousContainers[0] as HTMLElement;
            return;
        }

        const container = document.createElement('div');
        container.classList.add(...[containerClass, 'ss']);
        let c = document.getElementById('map');

        c.appendChild(container);
        this._containerElement = container;
    }
}

Then I use it in root module like this:

{ provide: OverlayContainer, useExisting: CustomOverlayContainer },

By anyway the container cdk-overlay-container is placed in the body instead document.getElementById('map');.

  • https://stackoverflow.com/questions/52763285/add-matdialog-popup-to-angular-root-and-not-to-body –  Aug 16 '21 at 21:22
  • Why? Why would you want custom overlay in anything other than the default? You should use the position to "attach" it to the correct element. – Akxe Aug 16 '21 at 21:35
  • Because I want to encapsulate it - add this container in app-root instead body. How to use attach? –  Aug 16 '21 at 21:39
  • Or how to add some `cdk-overlay-container` on the page? –  Aug 16 '21 at 22:18
  • 1
    Why, what is the actual benefit – Akxe Aug 16 '21 at 22:30
  • 1
    Don’t try to fix something that doesn’t need to be fixed. You have to learn to allocate your time to the important bits – Akxe Aug 16 '21 at 22:37
  • @Akxe I have a custom ion-loading inside app-root but when mat-select panel is open it's overriding my loading element. I have infinite scroll implemented inside mat-panel so I need to call api on scroll.But my loading is blocked by the cdk-overlay. – Prakash Khadka Dec 07 '22 at 11:22
  • I want this also. I'm creating an angular element that 3rd parties can add to their websites. I need encapsulate it so it does affect the 3rd parties website. – Ryan Layton Mar 05 '23 at 23:09

0 Answers0