How to implement MAT_DIALOG_DEFAULT_OPTIONS?

Question

On a project we multiple Dialog's. Now, I want to set samen global variables to the DialogOption.

I found: https://material.angular.io/components/dialog/overview and this code:

@NgModule({
  providers: [
    {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}}
  ]
})

I applied these code with some other, but it doesn't work. The settings doesn't applied at all.

Does anybody get these setting worked?

Answer 1

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.

Answer 2

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