Angular-ng-sidenav NPM

Angular Sidenav

See Demo

Features

Simple sidenav with hidden and collapsed view.
Variable properties and event bindings.
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.