How to Add Multiple Panel Classes to a Mat Dialog in Angular?

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 method.

Something like this:

  // Open dialog box
  const dialogRef =,{
    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 */


  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.