No provider for InjectionToken error in Angular Materials

Question

I am working on an Angular project with Angular Materials. Project is properly set up with Angular Materials and compiles without any issues and I am able to use several Angular Materials components.

But when I try to do the following injection in AppModule I get errors.

@Inject(MAT_EXPANSION_PANEL_DEFAULT_OPTIONS) private options: any

Error message:

StaticInjectorError(Platform: core)[AppComponent -> InjectionToken MAT_EXPANSION_PANEL_DEFAULT_OPTIONS]: 
    NullInjectorError: No provider for InjectionToken 

I face this error even after included MatExpansionModule in AppModule imports array.

Answer 1

The MAT_EXPANSION_PANEL_DEFAULT_OPTIONS token does not exist by default, you have to provide it. So if you want to set default options for the expansion panel, you would add it to your list of providers in your module:

providers: [{
  provide: MAT_EXPANSION_PANEL_DEFAULT_OPTIONS,
  useValue: {
    collapsedHeight: '100px',
    expandedHeight: '100px',
    hideToggle: true
  }
}]

https://stackblitz.com/edit/angular-material-inject?embed=1&file=main.ts