Angular Sidenav

• See Demo

Table of contents

• Features
• Getting started
• Usage
• API

Features

• [x] Simple sidenav with hidden and collapsed view.
• [x] Variable properties and event bindings.
• [x] Custom template.

Getting started

Step 1: Install angular-ng-sidenav:

NPM

npm i angular-ng-sidenav

Step 2: Import the SidenavLibModule:

import {SidenavModule} from 'angular-ng-sidenav';

@NgModule({
  declarations: [AppComponent],
  imports: [SidenavModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Usage sample

<ng-sidenav-container>
  <ng-sidenav
    [expanded]="isExpanded"
    [drawerState]="state"
    [drawerWidth]="'250px'"
    [drawerWidthCollapsed]="'80px'"
    [color]="'#202c2b'">
    Sidenav content
  </ng-sidenav>
  <ng-sidenav-content>
    Main content
  </ng-sidenav-content>
</ng-sidenav-container>

class TestComponent {
  isExpanded = true;
  state = 'collapsed';

  toggleSidenav() {
    this.isExpanded = !this.isExpanded;
  }
}

API

Inputs

| Input | Type | Default | Required | Description | | ------------- | ------------- | ------------- | ------------- | ------------- | | expanded | boolean | null | yes | Whether drawer is open or close depend on drawer state. | | drawerState | string | null | yes | Drawer state (expanded, collapsed, hidden). | | color | string | #19222a | no | Sidenav color | | drawerWidth | string | 250px | no | Drawer width by default. | | drawerWidthCollapsed | string | 80px | no | drawer default width on collapsed view by default. | | *hiddenOnCollapsed | boolean | false | no | show/hide some elements inside sidenav when drawer state changes from or to collapsed. |

Author

• Giorgi Merabishvili

License

MIT