To add multiple panel classes to a mat dialog in Angular, you can pass an array of panel classes as a second parameter to the MatDialog.open() method.
Something like this:
openDialog(){
// Open dialog box
const dialogRef = this.dialog.open(MyDialogComponent,{
width:'60%',
height: '50%',
panelClass: ['class1', 'class2'] // <-- Add multiple panel classes
});
}
Now to make these panel classes effective, you have to add them inside your global styles.css file. And you can add as many styles under each panel class as you want.
.class1 .mat-dialog-container{
background-color: aqua;
padding: 20px 10px;
/* Add More Styles */
}
.class2 .mat-dialog-container{
font-style: italic;
color: rgba(0, 0, 0, 0.8);
/* Add More Styles */
}
