NgxSidenav

Dependencies

"@angular/material": "^9.1.1"

Install

npm install ngx-toastr @angular/material@9 --save

or

yarn add ngx-toastr @angular/material@9

Setup

import { NgxSidenavModule } from '@kobotech/ngx-sidenav';
@NgModule({
  imports: [
    CommonModule,
    NgxSidenavModule
  ],
  bootstrap: [App],
  declarations: [App]
})
class AppModule {}

To use mat-icons, you need to include the material icons css in your project. You can add it to the head section of your index.html.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Use

import { Menu } from '@kobotech/ngx-sidenav';
@Component({...})
export class YourComponent {
  menu: Menu[] = [{
    type: 'header',
    title: 'Access control',
    children: [
      {
        type: 'normal',
        title: 'Access control',
        icon: {
          type: 'md',
          name: 'settings'
        },
        routerLink: 'access-control',
      }
    ]
  }]
}

<kobo-ngx-sidenav class="dark" [menuItems]="menu">
  <a [routerLink]="['/']" class="logo">
    <img src="assets/img/kobo-logo-white.png" alt="logo" class="logo">
  </a>
</kobo-ngx-sidenav>

Menu interface

export interface Menu {
  type: 'header' | 'normal';
  title: string;
  icon?: {
    type: 'md' | 'url';
    link?: string;
    name?: string;
  };
  children?: Menu[];
  routerLink?: string | any[];
  queryParams?: {
    [k: string]: any;
  };
}