3

In this stackblitz I'm getting the following error (Even though the MatBottomSheetModule is imported):

        ERROR
        Error: StaticInjectorError(AppModule)[CountryCodeSelectComponent -> MatBottomSheetRef]:
        StaticInjectorError(Platform: core)[CountryCodeSelectComponent -> MatBottomSheetRef]:
        NullInjectorError: No provider for MatBottomSheetRef!

Thoughts?

Angular / Components Feature Request

If you agrre you can vote for this. I requested making the use case symmetrical WRT how we make use of other similar Angular components / services.

https://github.com/angular/components/issues/17011

1
  • I actually injected MatBottomSheet instead of MatBottomSheetRef and called the dismiss() method on MatBottomSheet. It worked.
    – Sandeep
    Feb 16, 2022 at 5:53

2 Answers 2

18

You need providers for Bottom Sheet which you were missing.

Make these changes to material.module.ts

import {MatBottomSheetRef, MAT_BOTTOM_SHEET_DATA} from '@angular/material/bottom-sheet';

@NgModule({
  exports: [...]
  providers: [
    { provide: MatBottomSheetRef, useValue: {} },
    { provide: MAT_BOTTOM_SHEET_DATA, useValue: {} }
  ],
})

This is the recommended approach for Treeshaking for webpack for more performant and minimized bundles:

In file: country-code-select.component.ts

// Removed -1
// import { MatBottomSheetRef } from '@angular/material'; 


//Added +1
import { MatBottomSheetRef} from '@angular/material/bottom-sheet';  

The Stackblitz for your reference

https://stackblitz.com/edit/angular-material-baseline2-country-code-select-6hisdk

And you are set. Cheers!

1
4

The accepted answer works but you will get the this._bottomSheet.open is not a function error, simplest solution will be to:

import {MatBottomSheetModule} from '@angular/material/bottom-sheet'; in your component module or app module, and at it to your imports

@NgModule({
  imports: [
    ...,
    MatBottomSheetModule,
    ...,
  ],
  declarations: [...],
})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.