cdk(feature): Provide custom overlay container

Bug, feature request, or proposal:

[x] Feature request

What is the expected behavior?

In certain scenarios the overlay container has to be positioned somewhere else than as last element of document.body. The developer should be able to provide a NativeElement (HTMLElement) to CDK referencing a container to be used as overlay container.

What is the current behavior?

Overlay container is appended as last element to document.body

What is the use-case or motivation for changing an existing behavior?

In my case I have a themeing component, inside which all the material styling is applied but the overlay isn’t matched as it is positioned outside. Only applying the class to the container isn’t enough as it has to be a child of <my-theme>.

<my-app>
    <my-theme class="myAngularMaterialTheme">
        <!-- all components here get styled correctly //-->
    </my-theme>
</my-app>
<div class="cdk-overlay-container"></div>

Currently I’m hacking it by changing it’s position inside MyThemeComponent:

@Component({})
export class MyThemeComponent {
    constructor(elementReference: ElementRef, overlayContainer: OverlayContainer) {
        if(overlayContainer.getContainerElement()) {
            setTimeout(() => elementReference.nativeElement.appendChild(overlayContainer.getContainerElement()), 0);
        }
    }
}

[insansi]

I’m having the exact same issue. cdk-overlay-container is causing the options in md-select to appear outside the body.

[jgeiger-cr]

@actra-gschuster any chance you could provide a bit more detail? I’m struggling to fully implement your approach yet it seems exactly what I need. Anyway thanks a lot for your idea.