How to implement MAT_DIALOG_DEFAULT_OPTIONS?

Angular Material provides practical defaults for several of its config options, such as closeOnNavigation, autoFocus, etc.

If you only want to overwrite a few of the config items, while leaving the rest as their defaults, you can provide MAT_DIALOG_DEFAULT_OPTIONS like this:

import {MAT_DIALOG_DEFAULT_OPTIONS, MatDialogConfig} from '@angular/material';

...

  providers: [
    {
      provide: MAT_DIALOG_DEFAULT_OPTIONS,
      useValue: {
        ...new MatDialogConfig(),
        hasBackdrop: false,
      } as MatDialogConfig,
    }
  ]

...

With this approach, you only need to specify the config options you want to change. The rest will take their default values.

That works... Go here and add these to verify it.

import {MAT_DIALOG_DEFAULT_OPTIONS} from '@angular/material';

....

providers: [
  {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}}
]

Thanks to @Fartab, i saw my problem, the angular example opens te dialog at the following way:

const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
  width: '250px',
  data: {name: this.name, animal: this.animal}
});

But I'm open the dialog this way:

const dialogConfig = new MatDialogConfig();
dialogConfig.width = '600px';
dialogConfig.autoFocus = true;
dialogConfig.data = {
  customer: data,
};
const dialogRef = this.dialog.open(DeleteFtpCustomerComponent, dialogConfig);

I think every time I opend a dialog, the settings loaded from a new config. So I changed the opening of the dialog to the example of Fartab. Now its workng :)

import {
    MAT_DIALOG_DEFAULT_OPTIONS
  } from '@angular/material';

 @NgModule({
    providers: [  
        {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: 
        {hasBackdrop: true, direction: 'ltr',height:'500px'}}
    ]
 })

Adding like this should affect default options,

examples values:

hasBackdrop:true // will not allow closing dialog when clicking outside of it.

direction: 'ltr' //sets where will text start - from left to right.

We can disable angular material dialog box backdrop by setting hasBackdrop and disableClose properties add inside the dialog option.

openDialog(tabIndex, paramIndex){
const dialogRef = this.dialog.open(TabChangeDialogboxComponent,{
  width: '330px',
  height: '200px',
  hasBackdrop: true, //Here line to add
  disableClose: true,//Here line to add
  data: {
    tabInd: tabIndex,
    paramInd: paramIndex 
  }
});

Just in case if someone still needs help, follow this pattern for mat dialog default options.

module.ts

{ provide: MAT_DIALOG_DEFAULT_OPTIONS,
  useValue: { hasBackdrop: true, disableClose: true } as MatDialogConfig
}

Any Component where you want to open dialog.

const dialogConfig: MatDialogConfig = {}; // important to use this method.
dialogConfig.panelClass = 'no-padding-dialog';
// Any additional dialog configs
this.dialog.open(YourComponent, dialogConfig);

Avoid using following when you have to apply default configs as it create new instance of dialog config.

const dialogConfig = new MatDialogConfig(); // Don`t use