NgxYazuoSidenav

Installation

npm install --save ngx-yazuo-sidenav

Usage

Module:

Import gxYazuoSidenavModule from ngx-yazuo-sidenav

import { NgxYazuoSidenavModule } from 'ngx-yazuo-sidenav';

@NgModule({
  imports: [ NgxYazuoSidenavModule.forRoot() ]
})

Component

1. Markup

<button (click)="showSideNav()">Show Sidenav</button>

<ng-template #content>
   <h1>HELLO WORD!</h1>
</ng-template>

2. Component method

import { Component, TemplateRef, ViewChild } from '@angular/core';
import { YazuoSidenavSettings, NgxYazuoSidenavService, YazuoSidenavDirection } from 'ngx-yazuo-sidenav';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';

  @ViewChild('content', {static: true}) content: TemplateRef<any>;

  constructor(private yazuoSidenav: NgxYazuoSidenavService) {}

  settings: YazuoSidenavSettings = {
    bgColor:'#eeeeee', //default: '#eeeeee'
    width: 100, //default: 75
    animationTime: 1, //default: 0.5s
    position: YazuoSidenavDirection.Right, //default: YazuoSidenavDirection.Left
    bgBackDrop: 'rgba(0,0,0,0.2)', //default: rgba(0,0,0,0.2)
    backdrop: false, //default: true,
    clickOutside: false //default: true
    btnClose: false //default: true
  };

  showSideNav(): void {
    this.yazuoSidenav.open(this.content, this.settings); //settings is optional
  }

  closeSideNav(): void {
    this.yazuoSidenav.close()
  }
}

YazuoSidenav options

export interface YazuoSidenavSettings {
  bgColor?: string; //color background sidenav
  animationTime?: number; //duration for animation on close
  width?: number; //width of sidenav component
  position?: YazuoSidenavDirection; //position start sidenav: left ou right
  backdrop?: boolean; //show backdrop
  bgBackDrop?: string; //color for backdrop
  clickOutside?: boolean; //close the sidenav when clicked outside
  btnClose?: boolean; //flag for hidden or show close button
}