Changing Angular Material Mat-Dialog-Content Styles

Angular custom style to mat-dialog

You can pass a custom panelClass in your matDialogConfig Object (doc here)

so

openErrorDialog(errore: string): void{
    let dialogRef = this.dialog.open(ErrorDialog, {
        width: '80%',
        data: { error: errore }
        panelClass: 'custom-modalbox'
    });
}

And in your custom panelClass you can override the padding :

.custom-modalbox {
    mat-dialog-container {
        padding: 0;
    }
}

But your .custom-modalbox should be global scoped to be applied (not defined in the component styles )

Is there any way to modify the MatDialog overlay order?

Based on Eliseo's answer I came up with another solution, which fits my application better:

I did't want the parent component to manage the overlay order change, because I think it's more universal, if I create a component which is responsible for all dialog actions, and accepts a component as input to load it's template inside it's self. This way I can open a dilaog easily anywhere in my app, and open dialogs inside dialogs so on.

Based on Eliseo's answer, no panel class modification needed. Reordering the cdk-global-overlay-wrapper elements is enough.

Stackblitz link for the solution:

https://stackblitz.com/edit/angular-9-material-starter-8uhrgj?file=src/app/viewer-modal/viewer-modal.component.ts

How the files in the original question changed:

HTML

<mat-menu #menu="matMenu">
  <button mat-menu-item (click)="closeAll()">
    <mat-icon>close_all</mat-icon>
    <span>Close all</span>
  </button>
  <mat-divider></mat-divider>
  <button
    (click)="focusDialog(dialog, $event)"
    *ngFor="let dialog of this.dialog.openDialogs"
    mat-menu-item
  >
    <mat-icon>preview</mat-icon>
    <span>{{ dialog.componentInstance.data.title }}</span>
  </button>
</mat-menu>

focusDialog(dialogRef: MatDialogRef<any>, e: any) {
    const cdkOverlayWrappers = document.getElementsByClassName(
      'cdk-global-overlay-wrapper'
    );

    for (let i = 0; i < cdkOverlayWrappers.length; i++) {
      const wrapper = cdkOverlayWrappers[i];

      if (wrapper.contains(dialogRef.componentInstance.el.nativeElement)) {
        const parent = wrapper.parentNode!;
        const last = parent.lastChild;
        if (last != wrapper)
          last!.parentNode!.insertBefore(wrapper, last!.nextSibling);
        break;
      }
    }
  }

Change background color of Angular dialog

Use host in your component style-sheet, with that, you only modify the styles for that particular component:

:host ::ng-deep mat-dialog-container {
  background-color: transparent !important;
}

UPDATE

So in order to customize the material dialog, you will need to create a custom css class, and set that class within your style.scss file:

style.scss

.custom-modalbox > mat-dialog-container {
  background-color: transparent !important;
}

And where you have the MatDialog injected, use that css class for the panelClass property:

YourComponent.ts

onOpenDialig() {
  this.dialog.open(DialogComponent, {
    disableClose: true,
    width: "100%",
    height: "100%",
    panelClass: 'custom-modalbox', // if you don't set this
                                   // that css class won't applied
  });
}

So with that, other components can use the dialog safely without affecting the look & feel if they don't use custom-modalbox

Angular Material Dialog panelClass Wont Update

If you want to add your own custom class to style the material modal, then firstly passes your custom class to the panelClass key in your modal this way:

this.dialogRef = this.dialog.open(AddCustomComponent,{
    panelClass: 'custom-dialog-container', //======> pass your class name
});
this.dialogRef.afterClosed();

Once that's done, all you gotta do is style your modal by using your class and other models won't be affected. For example, you can remove the padding and margin this way.

/*Material Dialog Custom Css*/ 
.custom-dialog-container .mat-dialog-container{
    padding: 0;
}

.custom-dialog-container .mat-dialog-container .mat-dialog-content{
    margin: 0;
}
/*---------------------------*/ 

Mat-Dialog style changes when opening different dialogs using ViewEncapsulation.None

By using ViewEncapsulation.None you are moving all the styles to top level so it will start apply to all elements in the DOM. So if you want customize it there some options available

• Mat-dialog options you can pass "panelClass" and "backdropClass".
  Using this classes you can customize
• You can add common class to all the dialog you want to customize and write the style in global style.css . Scope you style with common class so it will not overlap with other

---

Related Topics