angular-materialbottom-sheet

How can I inject MatBottomSheetRef into the childComponent that is loaded inside the Bottom-Sheet?


In the official angular material component documentation it says

Any component contained inside of a bottom sheet can inject the MatBottomSheetRef as well.

I want to call sheetRef.dismiss() from within the component that I load inside the Bottom-Sheet.

Is this possible? And how can I do such an injection as suggested above?


Solution

  • (this worked for me) You can inject the MatBottomSheetRef like this into the Component, which is inside the MatBottomSheet (here: BottomSheetComponent):

    import {MatBottomSheetRef } from '@angular/material/bottom-sheet';
    
    @Component({
    ...
    })
    export class BottomSheetComponent {
    
    constructor(private ref: MatBottomSheetRef<BottomSheetComponent>) {}
    
    close() {
    this.ref.dismiss()
    }