Angular Material Dialog panelClass Wont Update

Question

I'm working with an Angular Material Dialog Box and I'm trying to make the background a custom color.

This question has been asked quite a few times and I've tried to apply the answer but it doesn't seem to work. Specifically, it doesn't appear that the panelClass of the dialog container is updating. Below is the component opening the dialog, the _theming.scss file, and the HTML element

import { Component, OnInit} from '@angular/core';
import { AuthService } from 'src/app/AuthenticationPackage/core/auth.service'
import { MatDialog, MatDialogConfig } from '@angular/material';
import { FactiondialogComponent } from './factiondialog/factiondialog.component';



@Component({
  selector: 'app-factions2',
  templateUrl: './factions2.component.html',
  styleUrls: ['./factions2.component.scss']
})
export class Factions2Component implements OnInit {


  constructor( public authService: AuthService,
            public dialog: MatDialog ) { }

  ngOnInit(){  }



  openDialog(faction): void{
    const dialogConfig = new MatDialogConfig()

    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.data = {faction};
    dialogConfig.panelClass = ".faction-dialog";


    const dialogRef = this.dialog.open(FactiondialogComponent, dialogConfig)

        dialogRef.afterClosed().subscribe(result => {
            console.log("dialog closed");
        });
}
}

The _theming.scss section:




@mixin mat-dialog-theme($theme) {
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  .faction-dialog{
    background-color:rgb(28, 31, 32)
}

  .mat-dialog-container {
    @include _mat-theme-elevation(24, $theme);
    background: mat-color($background, dialog);
    color: mat-color($foreground, text);
  }
}

@mixin mat-dialog-typography($config) {
  .mat-dialog-title {
    @include mat-typography-level-to-styles($config, title);
  }
}

This is the markup generated and but it does not include my custom class.

The Harpers

SOME CONTENT THAT DOESNT MATTER TO THE EXAMPLE

I believe the upper section should say:

but I'm not sure since I haven't gotten this to work. I've followed the documentation:

https://material.angular.io/components/dialog/api#MatDialogConfig

I'm not sure if there's something I need to add in my app module or somewhere else.

Per the request of Mr. Khan:

faction2.component.ts:

openDialog(faction): void{



    const dialogRef = this.dialog.open(FactiondialogComponent, {panelClass: 'faction-dialog'})

        dialogRef.afterClosed().subscribe(result => {
            console.log("dialog closed");
        });
}

Screen with modal open:

HTML Inspect Element

user_10178278 · Answer

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;
}
/*---------------------------*/

user_1472806 · Answer

Great answer above, but I wanted to just extend it by saying that the MatDialogConfig can also be passed via some config object.

i.e. I passed in custom class SingleViewDialog for my scenario, where the my-custom-maximize padding override was added to our mat-dialog.scss override file:

export interface SingleViewDialog {
  examUID: string;
  examData: TrendOctExam;
  layoutMode: Layout;  
}

public launchSingleView(examUID: string, examData: TrendOctExam) {
    const config: MatDialogConfig = {};
    config.hasBackdrop = true;
    config.disableClose = false;
    config.panelClass = 'my-custom-maximize';
    const mode: Layout = 'volume2d';
    config.data = { examUID, examData, layoutMode: mode};
    
    const dialogRef = this.matDialog.open(OCTThreeDSingleComponent, config );   //*** INJECT HERE ***
    
    dialogRef.afterClosed().subscribe(_ => this.viewStateService.updateLayoutMode('glaucoma'));
  }

user_1246387 · Answer

The panelClass gets added to the parent of the dialog container, so the space is what I was missing:

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

Also use ng-deep or put the style in the root stylesheet, not the component

Angular Material Dialog panelClass Wont Update

3 Answers