No Drama Sidebar/Flyout/Sidenav Component For Angular 6 and greater.
Installation
npm i ngx-flyout --save
Changelog
See the releases page on GitHub.
Usage
Add FlyoutModule
to your app module:
;
In your app component, simply use add a <ngx-flyout>
wrapper, then place the content you want in your flyout within it.
Options
Inputs
Property name | Type | Default | Description |
---|---|---|---|
open | boolean | false |
Controls the open state of the flyout. This should be two-way bound. |
position | 'left' , 'right' , 'top' , 'bottom' |
'right' |
What side the flyout should open. |
showCloseButton | showCloseButton: boolean |
true | Controls visibility of close button. |
flyoutClasses | flyoutClasses: string[] |
Additional styling classes for flyout. | |
showBackdrop | showBackdrop: boolean |
true | Controls visiblity of backdrop. |
hideOnBackdropClick | hideOnBackdropClick: boolean |
true | If clicking on backdrop closes the flyout or not. |
backdropClasses | backdropClasses: string[] |
Additional styling classes for backdrop |
Outputs
Property name | Callback arguments | Description |
---|---|---|
flyoutOpened | Emitted when flyout is opened. | |
flyoutClosed | Emitted when flyout is closed. | |
openChange | open: boolean |
Emitted when open is modified. This allows to do "two-way binding" |