How to implement MAT_DIALOG_DEFAULT_OPTIONS?

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

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.