Custom parent container for Angular material overlay container?

3
votes

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.

2
angularangular-material
This is the solution I've been using: blog.bbogdanov.net/post/… - Sébastien Tromp

2 Answers

4
votes

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

1
votes

If you want to change the styling of mat-dialogue-container adding a panel class and giving style is enough, but in case if you want to change the styling of cdk-overlay-container then adding a backdropClass will help

const dialogRef = this.dialog.open(PopupComponent, {
  backdropClass: 'popupBackdropClass',
  panelClass: 'custom-dialog-container',
  data: { data: data }
});

in component css add

.popupBackdropClass {
  background-color:yellow
}