aeb-nav-panel
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i aeb-nav-panel

Weekly Downloads

0

Version

1.0.3

License

none

Unpacked Size

110 kB

Total Files

36

Last publish

Collaborators

  • aalto