aeb-nav-panel

NgNavPanel

Setting up

First, install npm package aeb-nav-panel

npm i aeb-nav-panel

Then include it in a root module

import { NavPanelModule } from 'aeb-nav-panel'

@NgModule({
  declarations: [...],
  imports: [..., NavPanelModule],
  providers: [...],
  bootstrap: [...],
})
export class AppModule {
  constructor() {}
}

Usage

Insert tag into html and pass data into iconName, apiUrl, groups Inputs and titleClick Output. Icons are dynamically imported from @albank/ng-icons library

<nav-panel
  [iconName]="'platform'"
  [apiUrl]="'example.com/api/'"
  [groups]="[
    'Column 1',
    'Column 2',
    'Column 3',
    'Column 4'
    ]"
  (titleClick)="handleTitleClick()"
  >AEB Platform<nav-panel
/></nav-panel>

iconName is a name of an icon from @albank/ng-icons library which component will show. apiUrl is a URL from which nav-panel will fetch data that is going to be array of elements with model like this:

export interface NavigationElement {
  label: string;
  group: string;
  iconName: string;
  iconSrc: string;
  iconData: string;
  url: string;
  viewOrder: number;
  roles: [];
}

groups is an array of strings which represent columns titleClick is an Event Emitter which accepts function that will fire on title click