Angular Sidenav

• See Demo

Table of contents

• Features
• Getting started
• Usage
• API

Features

• <input checked="" disabled="" type="checkbox"> Simple sidenav with hidden and collapsed view.
• <input checked="" disabled="" type="checkbox"> Variable properties and event bindings.
• <input checked="" disabled="" type="checkbox"> 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

Author

• Giorgi Merabishvili

License

MIT