NgxDynamicMenu

Generate Angular application menu from your routing configuration!

$ npm install @orchestrator/ngx-dynamic-menu

Table of Contents

• Why
• Usage
  • Customization
• Documentation

Why?

Stop duplicating navigation links! You already have them in your router configuration - just reuse it!

Usage

Import DynamicMenuModule to your root module:

import { DynamicMenuModule } from '@orchestrator/ngx-dynamic-menu';

@NgModule({
  imports: [DynamicMenuModule.forRouter()],
})
export class AppModule {}

Then just render <ndm-dynamic-menu> or <ndm-default-dynamic-menu> component where you want your menu to be:

<nav>
  <ndm-default-dynamic-menu></ndm-default-dynamic-menu>
</nav>

<main>
  <router-outlet></router-outlet>
</main>

And your menu will magically appear in that location!

Customization

You can render default menu via <ndm-default-dynamic-menu> which will render menu within ul > li HTML tags.

But you have full control over your menu's template. To provide your own template use <ndm-dynamic-menu> component:

<ndm-dynamic-menu>
  <!-- Required -->
  <li *ndmDynamicMenuItem="let route; let item = item">
    <a [routerLink]="route.fullUrl">{{ item.label }}</a>
    <!-- <ndm-dynamic-menu-items> will render sub-groups if exist -->
    <ndm-dynamic-menu-items></ndm-dynamic-menu-items>
  </li>

  <!-- Optional, by default renders list of items without wrapping tags -->
  <ul *ndmDynamicMenuWrapper>
    <ndm-dynamic-menu-items></ndm-dynamic-menu-items>
  </ul>

  <!-- Optional, by default dynamicMenuItem template is used -->
  <li
    *ndmDynamicMenuToggle="
      let item;
      let route = route;
      let ctx = context
    "
  >
    <a [routerLink]="route.fullUrl">{{ item.label }}</a>
    <i class="down" (click)="ctx.opened = !ctx.opened"></i>
    <div class="group" *ngIf="ctx.opened">
      <ndm-dynamic-menu-items></ndm-dynamic-menu-items>
    </div>
  </li>
</ndm-dynamic-menu>

As you can see you have full control over your menu's template and functionality.

This project was generated with Angular CLI version 7.3.1.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.