@orchestrator/ngx-dynamic-menu
TypeScript icon, indicating that this package has built-in type declarations

1.5.7 • Public • Published

NgxDynamicMenu

Build Status Coverage Npm Npm Downloads Size Licence semantic-release

Generate Angular application menu from your routing configuration!

$ npm install @orchestrator/ngx-dynamic-menu

Table of Contents

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.

Readme

Keywords

none

Package Sidebar

Install

npm i @orchestrator/ngx-dynamic-menu

Weekly Downloads

13

Version

1.5.7

License

none

Unpacked Size

657 kB

Total Files

75

Last publish

Collaborators

  • gund
  • orchestratora
  • ryuugan