Nice Paintings, Mondrian

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

    1.5.7 • Public • Published


    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


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


    Import DynamicMenuModule to your root module:

    import { DynamicMenuModule } from '@orchestrator/ngx-dynamic-menu';
      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:


    And your menu will magically appear in that location!


    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:

      <!-- 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 -->
      <!-- Optional, by default renders list of items without wrapping tags -->
      <ul *ndmDynamicMenuWrapper>
      <!-- Optional, by default dynamicMenuItem template is used -->
          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">

    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.


    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.




    npm i @orchestrator/ngx-dynamic-menu

    DownloadsWeekly Downloads






    Unpacked Size

    657 kB

    Total Files


    Last publish


    • gund
    • orchestratora
    • ryuugan