ng2-sidebar

Demo

An Angular 2 sidebar component.

Installation

npm install --save ng2-sidebar

SystemJS configuration

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

var map = {
  // ...
  'ng2-sidebar': 'node_modules/ng2-sidebar',
  // ...
};

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

Usage

Add SidebarModule to your app module:

import { SidebarModule } from 'ng2-sidebar';

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

If you're using it in a feature module, you may need to add it as an import in that module as well.

In your component, simply use the directive in your template:

@Component({
  selector: 'app',
  template: `
    <ng2-sidebar [(open)]="_open">
      <p>Sidebar contents</p>
    </ng2-sidebar>

    <button (click)="_toggleSidebar()">Toggle sidebar</button>
  `
})
export class AppComponent {
  private _open: boolean = false;

  private _toggleSidebar() {
    this._open = !this._open;
  }
}

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

@Component({
  selector: 'example',
  template: `
    <ng2-sidebar [(open)]="_open">
      <a closeSidebar>Closes the sidebar</a>
    </ng2-sidebar>
  `
})
// ...

Browser support

Note that this component uses Angular 2's animation system, which relies on the Web Animations API. Unforunately, there is only partial support for this API in Firefox, Chrome, and Opera, so it's recommended to use the web-animations.js polyfill for support in other browsers.

Options

Inputs

Property name	Type	Default	Description
open	boolean	false	If the sidebar should be open. This should be two-way bound.
position	`'left'	'right'	'top'
closeOnClickOutside	boolean	false	Whether clicking outside of the open sidebar will close it.
showOverlay	boolean	false	If a translucent black overlay should appear over the page contents when the sidebar is open.
animate	boolean	true	Whether the sidebar should animate when opening/closing.
defaultStyles	boolean	false	Applies some basic default styles to the sidebar.
trapFocus	boolean	true	Keeps focus within the sidebar if it's open.
sidebarClass	string		Additional class name on the sidebar element.
overlayClass	string		Additional class name on the overlay element.
ariaLabel	string		String used for the sidebar's aria-label attribute.

Outputs

Property name	Callback arguments	Description
onOpen		Emitted when the sidebar is opened.
onClose		Emitted when the sidebar is closed.
onAnimationStarted	e: AnimationTransitionEvent	Emitted when the animation is started.
onAnimationDone	e: AnimationTransitionEvent	Emitted when the animation is done.