fix(menu): avoid DOM elements creation for hidden menu items (fix#270)

e2e/menu.e2e-spec.ts

@@ -23,7 +23,8 @@ const menu333 = by.css('#menu-first ul li:nth-child(4) ul li:nth-child(3) ul li:
 const newMenu = by.css('#menu-first ul li:nth-child(5) a');
 const addButton = by.css('#addBtn');
 const homeButton = by.css('#homeBtn');
-
+const hiddenMenuItem = by.css('#menu-second ul li:nth-child(3)');
+const hiddenSubmenuItem = by.css('#menu-second ul li:nth-child(2) ul li:nth-child(2)');
 const waitTime = 20 * 1000;
 
 const sidebarMenu31 = by.css('#menu-sidebar ul li:nth-child(4) ul li:nth-child(1) > a > span');
@@ -277,6 +278,14 @@ describe('nb-menu', () => {
       });
   });
 
+  it('hidden menu item should not be present', () => {
+    expect(element(hiddenMenuItem).isPresent()).toBeFalsy();
+  });
+
+  it('hidden submenu item should not be present', () => {
+    expect(element(hiddenSubmenuItem).isPresent()).toBeFalsy();
+  })
+
   it('should add query string to url', () => {
     element.all(menu1).first().click()
       .then(() => {

src/app/menu-test/menu-test.component.ts

@@ -96,6 +96,11 @@ export class NbMenuItem4Component { }
             <button class="btn btn-primary" id="homeBtn" (click)="navigateHome()">Home</button>
           </nb-card-body>
         </nb-card>
+        <nb-card size="xxlarge">
+          <nb-card-body>
+            <nb-menu id="menu-second" tag="secondMenu" [items]="menuItems1"></nb-menu>
+          </nb-card-body>
+        </nb-card>
       </nb-layout-column>
     </nb-layout>
   `,
@@ -120,6 +125,28 @@ export class NbMenuTestComponent implements OnInit, OnDestroy {
     },
   ];
 
+  menuItems1 = [
+    {
+      title: 'Menu #1',
+    },
+    {
+      title: 'Menu #2',
+      children: [
+        {
+          title: 'Menu #2.1',
+        },
+        {
+          title: 'Hidden Submenu Item',
+          hidden: true,
+        },
+      ],
+    },
+    {
+      title: 'Hidden Menu Item',
+      hidden: true,
+    },
+  ];
+
   private alive: boolean = true;
 
   constructor(private menuService: NbMenuService) { }
@@ -182,17 +209,17 @@ export class NbMenuTestComponent implements OnInit, OnDestroy {
       ],
       'firstMenu',
     );
-  }
+}
 
-  ngOnDestroy() {
-    this.alive = false;
-  }
+ngOnDestroy() {
+  this.alive = false;
+}
 
-  addMenuItem() {
-    this.menuService.addItems([{ title: 'New Menu Item' }], 'firstMenu');
-  }
+addMenuItem() {
+  this.menuService.addItems([{ title: 'New Menu Item' }], 'firstMenu');
+}
 
-  navigateHome() {
-    this.menuService.navigateHome('firstMenu');
-  }
+navigateHome() {
+  this.menuService.navigateHome('firstMenu');
+}
 }

src/framework/theme/components/menu/menu-item.component.html

@@ -1,29 +1,29 @@
-<span *ngIf="menuItem.group && !menuItem.hidden">
+<span *ngIf="menuItem.group">
   <i class="menu-icon {{ menuItem.icon }}" *ngIf="menuItem.icon"></i>
   {{ menuItem.title }}
 </span>
-<a *ngIf="menuItem.link && !menuItem.url && !menuItem.children && !menuItem.group && !menuItem.hidden"
-        [routerLink]="menuItem.link"
-        [fragment]="menuItem.fragment"
-        [queryParams]="menuItem.queryParams"
-        [attr.target]="menuItem.target"
-        [attr.title]="menuItem.title"
-        [class.active]="menuItem.selected"
-        (mouseenter)="onHoverItem(menuItem)">
+<a *ngIf="menuItem.link && !menuItem.url && !menuItem.children && !menuItem.group"
+   [routerLink]="menuItem.link"
+   [queryParams]="menuItem.queryParams"
+   [fragment]="menuItem.fragment"
+   [attr.target]="menuItem.target"
+   [attr.title]="menuItem.title"
+   [class.active]="menuItem.selected"
+   (mouseenter)="onHoverItem(menuItem)">
   <i class="menu-icon {{ menuItem.icon }}" *ngIf="menuItem.icon"></i>
   <span class="menu-title">{{ menuItem.title }}</span>
 </a>
-<a *ngIf="menuItem.url && !menuItem.children && !menuItem.link && !menuItem.group && !menuItem.hidden"
-        [attr.href]="menuItem.url"
-        [attr.target]="menuItem.target"
-        [attr.title]="menuItem.title"
-        [class.active]="menuItem.selected"
-        (mouseenter)="onHoverItem(menuItem)"
-        (click)="onSelectItem(menuItem)">
+<a *ngIf="menuItem.url && !menuItem.children && !menuItem.link && !menuItem.group"
+   [attr.href]="menuItem.url"
+   [attr.target]="menuItem.target"
+   [attr.title]="menuItem.title"
+   [class.active]="menuItem.selected"
+   (mouseenter)="onHoverItem(menuItem)"
+   (click)="onSelectItem(menuItem)">
   <i class="menu-icon {{ menuItem.icon }}" *ngIf="menuItem.icon"></i>
   <span class="menu-title">{{ menuItem.title }}</span>
 </a>
-<a *ngIf="!menuItem.children && !menuItem.link && !menuItem.url && !menuItem.group && !menuItem.hidden"
+<a *ngIf="!menuItem.children && !menuItem.link && !menuItem.url && !menuItem.group"
    [attr.target]="menuItem.target"
    [attr.title]="menuItem.title"
    [class.active]="menuItem.selected"
@@ -32,7 +32,7 @@
   <i class="menu-icon {{ menuItem.icon }}" *ngIf="menuItem.icon"></i>
   <span class="menu-title">{{ menuItem.title }}</span>
 </a>
-<a *ngIf="menuItem.children && !menuItem.hidden"
+<a *ngIf="menuItem.children"
    (click)="$event.preventDefault(); onToggleSubMenu(menuItem);"
    [attr.target]="menuItem.target"
    [attr.title]="menuItem.title"
@@ -42,19 +42,22 @@
   <i class="menu-icon {{ menuItem.icon }}" *ngIf="menuItem.icon"></i>
   <span class="menu-title">{{ menuItem.title }}</span>
   <i class="ion chevron" [class.ion-chevron-left]="!menuItem.expanded"
-                 [class.ion-chevron-down]="menuItem.expanded"></i>
+     [class.ion-chevron-down]="menuItem.expanded"></i>
 </a>
-<ul *ngIf="menuItem.children && !menuItem.hidden"
+<ul *ngIf="menuItem.children"
     [class.collapsed]="!(menuItem.children && menuItem.expanded)"
     [class.expanded]="menuItem.expanded"
     class="menu-items"
     [style.max-height.px]="maxHeight">
-  <li nbMenuItem *ngFor="let item of menuItem.children"
-                  [menuItem]="item"
-                  [class.menu-group]="item.group"
-                  (hoverItem)="onHoverItem($event)"
-                  (toggleSubMenu)="onToggleSubMenu($event)"
-                  (selectItem)="onSelectItem($event)"
-                  (itemClick)="onItemClick($event)"
-                  class="menu-item"></li>
+  <ng-container *ngFor="let item of menuItem.children">
+    <li nbMenuItem *ngIf="!item.hidden"
+        [menuItem]="item"
+        [class.menu-group]="item.group"
+        (hoverItem)="onHoverItem($event)"
+        (toggleSubMenu)="onToggleSubMenu($event)"
+        (selectItem)="onSelectItem($event)"
+        (itemClick)="onItemClick($event)"
+        class="menu-item">
+    </li>
+  </ng-container>
 </ul>

src/framework/theme/components/menu/menu.component.ts

@@ -5,20 +5,20 @@
  */
 
 import {
-    Component,
-    Input,
-    Output,
-    EventEmitter,
-    OnInit,
-    OnDestroy,
-    HostBinding,
-    ViewChildren,
-    QueryList,
-    ElementRef,
-    AfterViewInit,
-    PLATFORM_ID,
-    Inject,
-  } from '@angular/core';
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  OnInit,
+  OnDestroy,
+  HostBinding,
+  ViewChildren,
+  QueryList,
+  ElementRef,
+  AfterViewInit,
+  PLATFORM_ID,
+  Inject,
+} from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
 import { Router, NavigationEnd } from '@angular/router';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@@ -154,14 +154,17 @@ export class NbMenuItemComponent implements AfterViewInit, OnDestroy {
   styleUrls: ['./menu.component.scss'],
   template: `
     <ul class="menu-items">
-      <li nbMenuItem *ngFor="let item of items"
-                      [menuItem]="item"
-                      [class.menu-group]="item.group"
-                      (hoverItem)="onHoverItem($event)"
-                      (toggleSubMenu)="onToggleSubMenu($event)"
-                      (selectItem)="onSelectItem($event)"
-                      (itemClick)="onItemClick($event)"
-                      class="menu-item"></li>
+      <ng-container *ngFor="let item of items">
+        <li nbMenuItem *ngIf="!item.hidden"
+            [menuItem]="item"
+            [class.menu-group]="item.group"
+            (hoverItem)="onHoverItem($event)"
+            (toggleSubMenu)="onToggleSubMenu($event)"
+            (selectItem)="onSelectItem($event)"
+            (itemClick)="onItemClick($event)"
+            class="menu-item">
+        </li>
+      </ng-container>
     </ul>
   `,
 })