ngx-aside

Angular Aside Component. Simple Angular Sidebar Panel.

Usage no npm install needed!

<script type="module">
  import ngxAside from 'https://cdn.skypack.dev/ngx-aside';
</script>

README

NgxAside

Angular Aside Component. Simple Angular Sidebar Panel.

Demo

Installation

npm install --save ngx-aside
yarn add ngx-aside

Usage

//app.module.ts
import { 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>

Demo

Live Demo