CODEWITHSUNDEEP
angularangular-material
Fredrik_Borgstrom
Fredrik_Borgstrom

Reputation: 3218

Custom parent container for Angular material overlay container?

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.

Upvotes: 3

Views: 4784

Answers (2)

Pran R.V
Pran R.V

Reputation: 1158

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
}

Upvotes: 0

Flash
Flash

Reputation: 1000

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

Upvotes: 5

Related Questions