Nonviolent Pigeon Manifestation
    Have ideas to improve npm?Join in the discussion! »

    @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.

    Keywords

    none

    Install

    npm i @orchestrator/ngx-dynamic-menu

    DownloadsWeekly Downloads

    0

    Version

    1.5.7

    License

    none

    Unpacked Size

    657 kB

    Total Files

    75

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar