how Pass data to angular material bottomsheet

Question

I use Angular Material and Angular 6. I work a lot with material dialog and i make like this :

openDialog3(key : string): void {
  let dialogRef = this.dialog.open(PPSDialogRemoveComponent, {width: '1000px'}); 
  dialogRef.componentInstance.key = key;
}

Now i want to work with angular materialbottomsheet. To pass the key, to my bottom component i try this :

  openBottomSheet(key: string): void {
    let dialogRef = this.bottomSheet.open(BottomSheetOverviewExampleSheet);
    dialogRef.componentInstance.key = key;
}

But i have this error

ERROR in src/app/geo/geo.component.ts(568,15): error TS2339: Property 'componen Instance' does not exist on type 'MatBottomSheetRef'.

Thanks for your help

Answer 1

Copy From Angular Material: Sharing data with the bottom sheet component.

If you want to pass in some data to the bottom sheet, you can do so using the data property:

const bottomSheetRef = bottomSheet.open(HobbitSheet, {
  data: { names: ['Frodo', 'Bilbo'] },
});

Afterwards you can access the injected data using the MAT_BOTTOM_SHEET_DATA injection token:

import {Component, Inject} from '@angular/core';
import {MAT_BOTTOM_SHEET_DATA} from '@angular/material';

@Component({
  selector: 'hobbit-sheet',
  template: 'passed in {{ data.names }}',
})
export class HobbitSheet {
  constructor(@Inject(MAT_BOTTOM_SHEET_DATA) public data: any) { }
}

Note: Version of Angular Material is v7.0.3

Check this out: Sharing data with the bottom sheet component