fix(aio): restore component-styles/exclude hidden children

aio/content/navigation.json

@@ -135,6 +135,11 @@
               "title": "Component Interaction",
               "tooltip": "Share information between different directives and components."
             },
+            {
+              "url": "guide/component-styles",
+              "title": "Component Styles",
+              "tooltip": "Add CSS styles that are specific to a component."
+            },
             {
               "url": "guide/dynamic-component-loader",
               "title": "Dynamic Components",

aio/src/app/layout/nav-item/nav-item.component.html

@@ -20,7 +20,7 @@
   </button>
 
   <div class="heading-children" [ngClass]="classes">
-    <aio-nav-item *ngFor="let node of node.children" [level]="level + 1" [isWide]="isWide"
+    <aio-nav-item *ngFor="let node of nodeChildren" [level]="level + 1" [isWide]="isWide"
     [node]="node" [selectedNodes]="selectedNodes"></aio-nav-item>
   </div>
 </div>

aio/src/app/layout/nav-item/nav-item.component.spec.ts

@@ -1,4 +1,4 @@
-import { TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { SimpleChange, SimpleChanges, NO_ERRORS_SCHEMA } from '@angular/core';
 
@@ -24,7 +24,7 @@ describe('NavItemComponent', () => {
 
     // Enough to triggers component's ngOnChange method
     function onChanges() {
-      component.ngOnChanges({node: <SimpleChange><any> 'anything' });
+      component.ngOnChanges();
     }
 
     beforeEach(() => {
@@ -169,27 +169,46 @@ describe('NavItemComponent', () => {
   });
 
   describe('(via TestBed)', () => {
-    it('should pass the `isWide` property to all child nav-items', () => {
+    let component: NavItemComponent;
+    let fixture: ComponentFixture<NavItemComponent>;
+
+    beforeEach(() => {
       TestBed.configureTestingModule({
         declarations: [NavItemComponent],
         schemas: [NO_ERRORS_SCHEMA]
       });
-      const fixture = TestBed.createComponent(NavItemComponent);
-      fixture.componentInstance.node = {
+      fixture = TestBed.createComponent(NavItemComponent);
+      component = fixture.componentInstance;
+      component.node = {
         title: 'x',
-        children: [{ title: 'a' }, { title: 'b' }]
+        children: [
+          { title: 'a' },
+          { title: 'b', hidden: true},
+          { title: 'c' }
+        ]
       };
+    });
 
-      fixture.componentInstance.isWide = true;
+    it('should not show the hidden child nav-item', () => {
+      component.ngOnChanges(); // assume component.ngOnChanges ignores arguments
+      fixture.detectChanges();
+      const children = fixture.debugElement.queryAll(By.directive(NavItemComponent));
+      expect(children.length).toEqual(2);
+    });
+
+    it('should pass the `isWide` property to all displayed child nav-items', () => {
+      component.isWide = true;
+      component.ngOnChanges(); // assume component.ngOnChanges ignores arguments
       fixture.detectChanges();
       let children = fixture.debugElement.queryAll(By.directive(NavItemComponent));
-      expect(children.length).toEqual(2);
+      expect(children.length).toEqual(2, 'when IsWide is true');
       children.forEach(child => expect(child.componentInstance.isWide).toBe(true));
 
-      fixture.componentInstance.isWide = false;
+      component.isWide = false;
+      component.ngOnChanges();
       fixture.detectChanges();
       children = fixture.debugElement.queryAll(By.directive(NavItemComponent));
-      expect(children.length).toEqual(2);
+      expect(children.length).toEqual(2, 'when IsWide is false');
       children.forEach(child => expect(child.componentInstance.isWide).toBe(false));
     });
   });

aio/src/app/layout/nav-item/nav-item.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input, OnChanges} from '@angular/core';
 import { NavigationNode } from 'app/navigation/navigation.model';
 
 @Component({
@@ -14,19 +14,21 @@ export class NavItemComponent implements OnChanges {
   isExpanded = false;
   isSelected = false;
   classes: {[index: string]: boolean };
+  nodeChildren: NavigationNode[];
 
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes['selectedNodes'] || changes['node'] || changes['isWide']) {
-      if (this.selectedNodes) {
-        const ix = this.selectedNodes.indexOf(this.node);
-        this.isSelected = ix !== -1; // this node is the selected node or its ancestor
-        this.isExpanded = this.isSelected || // expand if selected or ...
-          // preserve expanded state when display is wide; collapse in mobile.
-          (this.isWide && this.isExpanded);
-      } else {
-        this.isSelected = false;
-      }
+  ngOnChanges() {
+    this.nodeChildren = this.node && this.node.children ? this.node.children.filter(n => !n.hidden) : [];
+
+    if (this.selectedNodes) {
+      const ix = this.selectedNodes.indexOf(this.node);
+      this.isSelected = ix !== -1; // this node is the selected node or its ancestor
+      this.isExpanded = this.isSelected || // expand if selected or ...
+        // preserve expanded state when display is wide; collapse in mobile.
+        (this.isWide && this.isExpanded);
+    } else {
+      this.isSelected = false;
     }
+
     this.setClasses();
   }
 

aio/src/app/layout/nav-menu/nav-menu.component.spec.ts

@@ -8,7 +8,7 @@ describe('NavMenuComponent (class-only)', () => {
   it('should filter out hidden nodes', () => {
     const component = new NavMenuComponent();
     const nodes: NavigationNode[] =
-      [ { title: 'a' }, { title: 'b', hidden: 'true'}, { title: 'c'} ];
+      [ { title: 'a' }, { title: 'b', hidden: true}, { title: 'c'} ];
     component.nodes = nodes;
     expect(component.filteredNodes).toEqual([ nodes[0], nodes[2] ]);
   });

aio/src/app/navigation/navigation.model.ts

@@ -6,7 +6,7 @@ export interface NavigationNode {
   url?: string;
   title?: string;
   tooltip?: string;
-  hidden?: string;
+  hidden?: boolean;
   children?: NavigationNode[];
 }