NgxAside
Angular Aside Component. Simple Angular Sidebar Panel.
Installation
npm install --save ngx-asideyarn add ngx-aside
Usage
//app.module.tsimport { NgxAsideModule } from 'ngx-aside';import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ imports: [ NgxAsideModule, BrowserAnimationsModule ] })
For animations please import the BrowserAnimationsModule
.
<ngx-aside #NgxAsidePanelRight (cancel)="onCancel()" (submit)="onSave()" [title]="'Title'" [cancelButtonTitle]="'Discard'" [submitButtonTitle]="'Send'" [closeOnEscape]="false" [showOverlay]="false" [showDefaultFooter]="true" [showDefaultHeader]="true"> </ngx-aside> <button (click)="NgxAsidePanelLeft.show()">Show Sidebar panel</button>
You can disable default header and footer of panel
[showDefaultFooter]="false" [showDefaultHeader]="false"
Add custom header and footer to the panel
<ngx-aside #NgxAsidePanelRight [showDefaultFooter]="false" [showDefaultHeader]="false"> <header>My own header with own styles</header> <footer> My own footer, with custom buttons <button (click)="NgxAsidePanelRight.hide()"> Close </button> </footer> </ngx-aside>