Search code examples
javascriptangulartypescriptangular-materialmat-dialog

Dynamically Creating Mat Dialog Config


I provide MAT_DIALOG_DEFAULT_OPTIONS in app.module.ts to create global defaults for MatDialog dialogs:

function matDialogProviderFactory() {
  const matDialogConfig: MatDialogConfig = {/* presets */};

  if (/* some condition */) {
    matDialogConfig.panelClass = 'a-class';
  }

  return matDialogConfig;
}

@NgModule({
  ...,
  providers: [
    {
      provide: MAT_DIALOG_DEFAULT_OPTIONS,
      useFactory: matDialogProviderFactory,
    }
  ],
})

My goal is to evaluate the condition in matDialogProviderFactory() every time a dialog is created so I can conditionally add a class. However, the function is run only once at the start. How can I run matDialogProviderFactory() every time a dialog is created? Or, how else can I achieve my goal?


Solution

  • If you need specific configuration for modules that is a good approach, but if you need more custom configuration every time a dialog is created you can create a factory class that generate Mat Dialogs with specific configurations