better-bottomsheet v1.0.1
Better Bottomsheet
Homepage: nishchay3.github.io/reusable-but-better
This bottom sheet is inspired by Instagram's reels comment section bottom sheet.
The BetterBottomSheet
service can be used to open Material Design panels to the bottom of the screen.
These panels are intended primarily as an interaction on mobile devices where they can be used as an
alternative to dialogs and menus.
Installation
npm i better-bottomsheet
Usage
You can open a bottom sheet by calling the open
method with a component to be loaded and an
optional config object. The open
method will return an instance of BetterBottomSheetRef
:
const bottomSheetRef = bottomSheet.open(SocialShareComponent, {
ariaLabel: 'Share on social media',
});
The BetterBottomSheetRef
is a reference to the currently-opened bottom sheet and can be used to close
it or to subscribe to events. Note that only one bottom sheet can be open at a time. Any component
contained inside of a bottom sheet can inject the MatBottomSheetRef
as well.
bottomSheetRef.afterDismissed().subscribe(() => {
console.log('Bottom sheet has been dismissed.');
});
bottomSheetRef.dismiss();
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 BETTER_BS_DATA
injection token:
import { Component, Inject } from '@angular/core';
import { BETTER_BS_DATA } from 'better-bottomsheet';
@Component({
selector: 'hobbit-sheet',
template: 'passed in {{ data.names }}',
})
export class HobbitSheet {
constructor(@Inject(BETTER_BS_DATA) public data: { names: string[] }) {}
}