Custom parent container for Angular material overlay container?

Question

Angular material creates overlay containers for various components such as their menu, snackbar and dialog components.

How can I, in an easy way, decide which element a cdk-overlay-container should be appended to?

Currently, it's appended to the body element. So if I trigger full screen mode for any other element than the body element, it won't be seen. Which of course is not what I want.

Answer 1

Basically create a class that extends OverlayContainer. Override the getContainerElement method where you return your HTML element which should be appended with the overlay. If needed, You can also override _createContainer method, where you do your own logic to create the element.

Finally provide your CustomOverlayContainer class as Token for OverlayContainer like this:

@NgModule({
    providers: [{provide: OverlayContainer, 
                 useClass: CustomOverlayContainer}],
    // ...
})
export class MyModule { }

Just have a look at the origin file. It's quite easy: OverlayContainer