angular/aio/src/app/layout/nav-item/nav-item.component.ts
Ward Bell 8d300ffbfc fix(aio): header click should always toggle expand/collapse (#16439)
Also adds class tests for this NavItemComponent.
Not (yet) testing effects on the templated HTML
2017-04-30 09:07:00 -07:00

40 lines
1022 B
TypeScript

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { NavigationNode } from 'app/navigation/navigation.model';
@Component({
selector: 'aio-nav-item',
templateUrl: 'nav-item.component.html',
})
export class NavItemComponent implements OnChanges {
@Input() selectedNodes: NavigationNode[];
@Input() node: NavigationNode;
@Input() level = 1;
isExpanded = false;
isSelected = false;
classes: {[index: string]: boolean };
ngOnChanges(changes: SimpleChanges) {
if (changes['selectedNodes'] || changes['node']) {
const ix = this.selectedNodes.indexOf(this.node);
this.isSelected = ix !== -1;
if (ix !== 0) { this.isExpanded = this.isSelected; }
}
this.setClasses();
}
setClasses() {
this.classes = {
['level-' + this.level]: true,
collapsed: !this.isExpanded,
expanded: this.isExpanded,
selected: this.isSelected
};
}
headerClicked() {
this.isExpanded = !this.isExpanded;
this.setClasses();
}
}