Search code examples
angularangular-material

How to set MAT_FORM_FIELD_DEFAULT_OPTIONS globally in angular v17


This is how to configure the appearance of mat form fields.

@NgModule({
providers: [
  {provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline'}}
 ]
})

How to do the same in v17 without module? Btw, there many other such tokens for globally configuring providers. However, the documentation doesn't tell how to configure them when using standalone style.

Thanks for helping.


Solution

  • You can add this token inside the providers of the bootstrapApplication in main.ts

    bootstrapApplication(InputClearableExample, {
      providers: [
        {
          provide:MAT_FORM_FIELD_DEFAULT_OPTIONS,
          useValue: {appearance: 'fill'}
        },
        provideAnimations(),
        provideHttpClient(),
        importProvidersFrom(MatNativeDateModule)
      ]
    }).catch(err => console.error(err));
    

    Example