I am trying to customize the default "mat-dialog" in Angular 5. What I want to achieve is having a toolbar in the upper part of the dialog, which should cover the whole width. However, the mat-dialog-container has a fixed padding of 24px which I could not override. I tried to style both the h1 and the mat-dialog-container.
@Component({
selector: 'error-dialog',
template:
` <h1 mat-dialog-title> ERRORE </h1>
<div mat-dialog-content>
{{data.error}}
</div>
<div mat-dialog-actions>
<button mat-button (click)="onClick()">Ok</button>
</div>`,
styles: [
'h1 { background: #E60000; color: white; }',
// 'myDialogStyle .mat-dialog-container { padding: 1px !important;}'
]})
export class ErrorDialog {
constructor(
public dialogRef: MatDialogRef<ErrorDialog>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
onClick(): void {
this.dialogRef.close();
}
}
openErrorDialog(errore: string): void{
let dialogRef = this.dialog.open(ErrorDialog, {
width: '80%',
data: { error: errore }
//panelClass: 'myDialogStyle'
});
}
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 )
This will definitely work:
::ng-deep.mat-dialog-container {
padding: 0px !important;
}
You should use panelClass on the component at the same time as ::ng-deep on the css.
openErrorDialog(errore: string): void{
let dialogRef = this.dialog.open(ErrorDialog, {
width: '80%',
data: { error: errore }
panelClass: 'custom-modalbox'
});
}
in css:
::ng-deep .custom-modalbox {
mat-dialog-container {
padding: 0;
}
}