To begin, add the MatBottomSheetModuel to your project. Go to the app module file, add the import statement, and add it to the app.
App Module File
Using the Bottom Sheet
Go into a HTML page and add a button to trigger the bottom sheet. Attach a click event to it so we can click on the button to activate the bottom sheet.
App Component HTML
Go into the TypeScript file and define the method for the click event.
Import MatBottomSheet from Angular Material Bottom Sheet and inject it in the constructor of the class. Then call the open() method inside the click function to active the bottom sheet.
For the argument, we need to pass in the component that will be used for the bottom sheet. Since we do not have a component for the sheet, we cannot pass anything yet.
Once the component files are generated, pass in the name of the component in the open method.
For Angular 8 and below
If you are using Angular 8 and below, make sure to add the component that the bottom sheet is using inside the entryComponents array in the app module file.
App Module File
You need to do this for Angular versions below 9 because of how the project is compiled. For efficiency, the compiler will only compile the components that are declared in the code.
Since this was not necessary for the bottom sheet, the component needs to be added to the entryComponents array.
Transferring Data Into the Bottom Sheet
To transfer data into the sheet
For the type, use the type of the data that was passed in. If we take a look at our code, we are passing in a string, so the type of our data will be a string.
Now our data is successfully transferred and it can be used within the sheet.
Template Component HTML
For more complex data, we can pass in an JSON object instead.
Transferring Data Out
To transfer data out from the bottom sheet. Go to the Bottom Sheet component TypeScript file and add MatBottomSheetRef to the imports. Then inject it inside the constructor.
Override the ngOnDestroy() method, call the dismiss method from the BottomSheetRef object, and then pass in the data that you want to transfer.
The results argument represents the data that we passed in the dismiss method.
Whenever the dialog close, we can get the data.
Modifying Default Behaviors
We can also override the default settings for the sheet.
For the full list and details, visit the Angular Material website.
©2019 - 2023 Codeible. All rights reserved.