Angular7 Aside
Install
npm i @ng4746/aside @angular/animations -Sapp.module.ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AsideModule } from 'aside';
@NgModule({
imports: [
AsideModule,
BrowserAnimationsModule
]
})Add html:
<ng-aside #NgAside (cancel)="onCancel()"
(submit)="onSave()"
[title]="'Title'"
[cancelButtonTitle]="'Discard'"
[submitButtonTitle]="'Send'"
[closeOnEscape]="false"
[showOverlay]="false"
[showDefaultFooter]="true"
[showDefaultHeader]="true">
</ng-aside>
<button (click)="NgAside.show()">Show Sidebar</button>You can disable default header and footer of panel
[showDefaultFooter]="false"
[showDefaultHeader]="false"Add styles.scss:
@import "~@ng4746/aside/styles/simple";| Inputs | |
|---|---|
| position | Type: "right" "left" |
| Default value: right | |
| showOverlay | Type: boolean |
| Default value: true | |
| closeOnEscape | Type: boolean |
| Default value: true | |
| showDefaultFooter | Type: boolean |
| Default value: true | |
| showDefaultHeader | Type: boolean |
| Default value: true | |
| title | Type: string |
| cancelButtonTitle | Type: string |
| submitButtonTitle | Type: string |
| Outputs | |
|---|---|
| cancel | Emits an event |
| submit | Emits an event |