DynamicMenu

Will render menu based on provided route configuration.

You have to provide template(s) for pieces of menu.

Selector

ndm-dynamic-menu

Template

dynamicMenuItem _{[ndmDynamicMenuItem]}

• Captures template that will render each menu item
• Required
• Context:

interface DynamicMenuItemContext {
  /** Each computed route config */
  $implicit: DynamicMenuRouteConfig;
  /** From each computed route config's `data.menu` prop */
  item: DynamicMenuItem;
}

Types: DynamicMenuRouteConfig, DynamicMenuItem

Example:

<ndm-dynamic-menu>
  <li *ndmDynamicMenuItem="let route; let item = item">
    <a [routerLink]="route.fullUrl">{{ item.label }}</a>
    <ndm-dynamic-menu-items></ndm-dynamic-menu-items>
  </li>
</ndm-dynamic-menu>

dynamicMenuWrapper _{[ndmDynamicMenuWrapper]}

• Captures template that will wrap menu items
• Optional, by default renders list of items without wrapping tags
• Context:

interface DynamicMenuWrapperContext {
  /** Reference to template with children items */
  $implicit: TemplateRef<any>;
  /** Context that has to be passed along to TemplateRef */
  ctx: any;
  /** Array of route configurations that will be rendered */
  configs: DynamicMenuRouteConfig[];
}

Types: @angular/coreTemplateRef, DynamicMenuRouteConfig

Example:

<ndm-dynamic-menu>
  <ul *ndmDynamicMenuWrapper>
    <ndm-dynamic-menu-items></ndm-dynamic-menu-items>
  </ul>
</ndm-dynamic-menu>

dynamicMenuToggle _{[ndmDynamicMenuToggle]}

This will usually contain toggling elements with icon like <button>

• Captures template that will render menu item whose config renderAsToggle set to true
• Optional, be default renders dynamicMenuItem template and dynamicMenuWrapper one after another
• Context:

interface DynamicMenuToggleContext {
  /** Each computed route config */
  $implicit: DynamicMenuRouteConfig;
  /** From each computed route config's `data.menu` prop */
  item: DynamicMenuItem;
  /** Template that renders sub-level of menu */
  tpl: TemplateRef<any>;
  /** Context that has to be passed along to TemplateRef */
  ctx: any;
  /** Flag that helps to control visibility of children, `false` by default */
  context = { opened: false };
}

Types: DynamicMenuRouteConfig, DynamicMenuItem, @angular/coreTemplateRef

Example:

<ndm-dynamic-menu>
  <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>

<ndm-dynamic-menu-items>

This component will render sub-menu of current menu node if exist.