ng2c-sidebar v0.0.1

ng2-sidebar

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

Outputs