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.

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

• javascript
• angular
• typescript
• angular-material

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

2 Answers 2

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!

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: [...],
})