CODEWITHSUNDEEP
angularangular-material
Ardenne
Ardenne

Reputation: 927

Angular custom style to mat-dialog

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'
    });
}

Upvotes: 49

Views: 137618

Answers (12)

Rahul Raj
Rahul Raj

Reputation: 1

Add encapsulation:ViewEncapsulation.None in your ts file;

    import { Component, ViewEncapsulation} from '@angular/core';

@Component({
  template: `
    <mat-toolbar color="primary">AddFile</mat-toolbar>
    <mat-dialog-content>
      Content goes here
    </mat-dialog-content>
    <mat-dialog-actions>
      <button mat-button>Add</button>
      <button mat-button>Cancel</button>
    </mat-dialog-actions>
  `,
  styles:[
    `mat-dialog-container.mat-dialog-container {
      padding:0;
}`
  ],
  encapsulation:ViewEncapsulation.None

})
export class FileNameDialogComponent {

}

For more info you can refer below stackblitz example

Upvotes: 0

fbraun
fbraun

Reputation: 1

For Angular 17 this worked for me:

.mat-mdc-dialog-container .mdc-dialog__surface { padding: 0 !important; }

You have to apply it globally.

Upvotes: 0

Pepe Alvarez
Pepe Alvarez

Reputation: 1624

You need to build your own custom class and set it up in the dialog property panelClass.

openDialog(): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      data: this.data,
      panelClass: 'my-custom-container'
    });
}

In your styles.css/styles.scss you write down your custom rules. Then you said you wanted to style the mat-dialog-title, in order to do that I used the browser inspector and searched for a class name to target (to see the actual class name angular gave it to the html element). I found that name to be 'mat-mdc-dialog-title' and I used it in my rules.

.my-custom-container {
    background-color: aqua;
}
/* Increasing css specificity by duplicating class */
/* Increasing the specificity is important to overwrite angular
   own rules on the component, without it your rules do not win 
   against angular material dialog's rules.
*/
.my-custom-container .mat-mdc-dialog-title.mat-mdc-dialog-title {
    color: blue;
}

Your dialog's html should look something like this:

<section class="my-custom-container">
  <h1 mat-dialog-title>Delete file</h1>
  <div mat-dialog-content>
    Would you like to delete cat.jpeg?
  </div>
  <div mat-dialog-actions>
    <button mat-button mat-button color="accent" mat-dialog-close>No</button>
    <button mat-button mat-raised-button color="primary" mat-dialog-close>Yes</button>
  </div>
</section>

Upvotes: 0

San Jaisy
San Jaisy

Reputation: 17048

Define the CSS in the global file and we can use the Mat Dialog API to add the css

Example

   constructor(private dialogRef: MatDialogRef<MetricCreateComponent>) { }

   ngOnInit(): void {
        this.dialogRef.addPanelClass('custom-dialog-container-metric-configure');
    }


    onRemoveClick(): void {
        this.dialogRef.removePanelClass('custom-dialog-container-metric-configure');
    }

Upvotes: 0

Alexander &#193;lvarez
Alexander &#193;lvarez

Reputation: 11

it worked for me in angular 13

in style.css

::ng-deep #dialogTrasparent{
  padding: 0px !important;
  box-shadow: none !important;
  background: transparent !important;

}

and componenet.ts

const loader = this.dialog.open(DialogLoader, 
{id: 'dialogTrasparent'});

Upvotes: 1

Igor Kurkov
Igor Kurkov

Reputation: 5040

Unfortunately, we can't set all desired styles in the mat-dialog config. MatDialogConfig allows you to set only width, height, max/min-width, max/min-height, and custom classes in the config to operate by them for some specific options. But also you can set up global styles for modal in styles.scss file. *.ts

let dialogRef = this.matDialog.open(
   SomeEntryComponent, 
   <MatDialogConfig>modalConfig // <- there you can set width/height
);
    dialogRef.afterClosed().subscribe((result: any) => { /* do stuff */ });

global styles.scss

.cdk-overlay-pane mat-dialog-container.mat-dialog-container { // <- in this way all other styles
  margin: 20px 5px;
  padding: 30px;
}

Upvotes: 0

Kamil Kafoor
Kamil Kafoor

Reputation: 306

The best way to approach the solution is to change the code only at a single place. This can be done be using the code:

::ng-deep.mat-dialog-container {
overflow: visible;
}

This helps you to change the code only at a single place rather than changing at all the places. This works perfectly. No need to declare anything else anywhere apart from the corresponding CSS file.

Upvotes: 1

Saransh Dhyani
Saransh Dhyani

Reputation: 405

This will definitely work:

::ng-deep.mat-dialog-container {
    padding: 0px !important;
}

Upvotes: 18

Chema
Chema

Reputation: 936

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

Upvotes: 17

Pierre Mallet
Pierre Mallet

Reputation: 7221

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 )

Upvotes: 112

Suryateja Hanumandla
Suryateja Hanumandla

Reputation: 131

panelClass works perfectly when your styles are global scoped otherwise it won't as styles are not available.

Add ng-deep before your styles to access it globally!! 

::ng-deep {

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

}

Upvotes: 7

Ardenne
Ardenne

Reputation: 927

I just change this, it works perfectly:

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

Here there is a working example: https://stackblitz.com/edit/custom-dialog?file=src/styles.css

Upvotes: 10

Related Questions