ng-sidebar

Demo

Formerly called ng2-sidebar

An Angular sidebar component.

Installation

npm install --save ng-sidebar

SystemJS configuration

If you're using SystemJS, be sure to add the appropriate settings to your SystemJS config:

var map = {   // ...   'ng-sidebar': 'node_modules/ng-sidebar',   // ... };  var packages = {   // ...   'ng-sidebar': {     main: 'lib/index',     defaultExtension: 'js'   },   // ... };

Changelog

See the releases page on GitHub.

Usage

Add SidebarModule to your app module:

import { SidebarModule } from 'ng-sidebar';  @NgModule({   declarations: [AppComponent],   imports: [BrowserModule, SidebarModule.forRoot()],   bootstrap: [AppComponent], }) class AppModule {}

In your app component, simply use add a <ng-sidebar-container> wrapper, then place your <ng-sidebar>(s) and content within it. Your page content should be in some container with a ng-sidebar-content attribute.

@Component({   selector: 'app',   template: `     <!-- Container for sidebar(s) + page content -->     <ng-sidebar-container>        <!-- A sidebar -->       <ng-sidebar [(opened)]="_opened">         <p>Sidebar contents</p>       </ng-sidebar>        <!-- Page content -->       <div ng-sidebar-content>         <button (click)="_toggleSidebar()">Toggle sidebar</button>       </div>      </ng-sidebar-container>   ` }) class AppComponent {   private _opened: boolean = false;    private _toggleSidebar() {     this._opened = !this._opened;   } }

If nothing seems to show up, your wrappers' heights may be collapsing. Try adding a height (e.g. height: 100vh;) to the wrapper <ng-sidebar-container> or other wrapper elements you may have. (See issue #100 for more info.)

A directive is also provided to easily close the sidebar by clicking something inside it:

<ng-sidebar>   <a closeSidebar>Closes the sidebar</a> </ng-sidebar>

You can also use the open() and close() functions:

<ng-sidebar #sidebar>   <button (click)="sidebar.close()">Close sidebar</button> </ng-sidebar>  <button (click)="sidebar.open()">Open sidebar</button>

Functions

The sidebar has a few public functions:

Styling

Various class names are attached to the sidebar and container for easier styling.

If you are using Angular's default emulated view encapsulation, you may have to use the >>> selector to target the sidebar's classes. Check out Angular's documentation for more details. Note that the /deep/ selector will soon be deprecated.

Sidebar

Backdrop

Page content

Options

<ng-sidebar-container>

Inputs

Outputs

<ng-sidebar>

Inputs

Outputs

Modes

over

This is the default mode. The sidebar slides in over the page contents.

push

The page contents is pushed to make space for the sidebar.

slide

The entire page slides over to show the sidebar. Note that this only works if you have one sidebar open at a time.