Nonstop Pajama Models

    ng-sidebarjs
    TypeScript icon, indicating that this package has built-in type declarations

    8.0.0 • Public • Published

    GitHub release npm

    ng-sidebarjs

    Create mobile sidebar/sidenav experiance in Angular.

    Are you looking for a version with AngularJS? Try angular-sidebarjs

    npm install ng-sidebarjs --save
    

    Demo

    Open the demo on your device and try the touch gestures!

    Options

    <sidebarjs-element
      // Optional | Required only for multiple sidebarjs
      [sidebarjsName]="'myCustomName'"
      
      // Optional
      [sidebarjsConfig]="{
        // Check https://github.com/SidebarJS/sidebarjs#options for all available options
      }"
      
      // Optional | Function called after sidebar is open
      (open)="onOpenSidebar()"
      
      // Optional | Function called after sidebar is close
      (close)="onCloseSidebar()"
      
      // Optional | Function called when sidebar change visibility
      (changeVisibility)="onChangeVisibility($event)">
    </sidebarjs-element>

    Implementation

    Import Module

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';
    
    import { SidebarjsModule } from 'ng-sidebarjs';
    
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        SidebarjsModule.forRoot()
      ],
      bootstrap: [
        AppComponent
      ]
    })
    export class AppModule { }

    Create sidebarjs-element

    Write sidebarjs-element tag and a trigger element with just [sidebarjsToggle|sidebarjsOpen|sidebarjsClose] attribute.

    <div sidebarjsOpen>Open Sidebar!</div>
    
    <sidebarjs-element>
      Hello!
    </sidebarjs-element>

    Migrate from <=4.0.0 to 6.0.0

    Naming convention become consistent: everything that was SidebarJSName, now is SidebarjsName.

    <=4.0.0 6.0.0
    SidebarJSModule SidebarjsModule
    SidebarJSService SidebarjsService
    <sidebar-js> <sidebarjs-element>
    [sidebarjsOpen] [sidebarjsOpen]
    [sidebarjsClose] [sidebarjsClose]
    [sidebarjsToggle] [sidebarjsToggle]

    Install

    npm i ng-sidebarjs

    DownloadsWeekly Downloads

    9

    Version

    8.0.0

    License

    MIT

    Unpacked Size

    93.9 kB

    Total Files

    22

    Last publish

    Collaborators

    • lorenzodianni