ngx-sticky-sidebar v1.0.4

Sticky-Sidebar

Status

DEMO

REPOSITORY

A Customizable Sidebar Angular Component

Installation

npm install --save ngx-sticky-sidebar

Usage

Add NgxStickySidebarModule to your project:

app module:

import { NgxStickySidebarModule } from 'ngx-sticky-sidebar';

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

or layout component:

import { NgxStickySidebarModule } from 'ngx-sticky-sidebar';

@Component({
  selector: 'app-layout',
  standalone: true,
  imports: [
    NgxStickySidebarModule
  ],
  template: '',
  styles: []
})
export class LayoutComponent {}

Add <ngx-sticky-sidebar> to your layout template:

<ngx-sticky-sidebar [items]="items" [backgroundColor]="backgroundColor" [color]="color">
    <div id="sidebar-header" style="text-align: center;">
        <span> Sticky Sidebar </span>
    </div>
    <div id="sidebar-content">
        <span>Page Content</span>
        <router-outlet></router-outlet>
    </div>
</ngx-sticky-sidebar>

Inputs

State

Add NgxStickySidebarService where you want get or set sidebar state:

import { NgxStickySidebarService } from 'ngx-sticky-sidebar';

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.scss']
})
export class LayoutComponent {
    state: boolean;

    constructor( private sidebar: NgxStickySidebarService ) {
        this.sidebar.stateAsObs.subscribe((state: boolean) => {
            this.state = state;
        })
    }

    toogle(): void {
        this.sidebar.toggle();
    }

    set_value(value: boolean): void {
        this.sidebar.set_state = value;
    }
}

Items

Declare your sidebar items.

E.g:

items: StickySidebarItems[] = [
    {
      label: 'Home',
      route: '/',
      childs: []
    },
    {
      label: 'Apps',
      route: '/apps',
      collapse: true,
      iconClass: 'bi bi-window-plus', // <-- using Boostrap Icons
      childs: [
        {
          label: 'One',
          route: '/one'
        },
        {
          label: 'Two',
          route: '/two'
        }
      ]
    }
]

Properties