I am trying to create complex breadcrumbs with dropdown-navigation as follows:
I am struggling with the problem of external clicking: when I need to close the drop-down list by clicking somewhere from the element, BUT, if I click another navigation element - it should be open (at the same time only one open pack opens).
I did like this:
1) I detect externalClick by containing event.target in the parent element
2) Switching occurs by closing all breadcrumbs and opening the necessary.
a simple example of plunker crackers
:
<ul #simpleBreadcrumbs> <li *ngFor="let breadcrumb of breadcrumbs" class="bread_item" (click)="toogleStateOfSubparagraphs(breadcrumb)"> <div> <span>{{breadcrumb.label}}</span> <i class="icon-arrows-glyph-1_bold-down" *ngIf="!breadcrumb.isOpen"> </i> <i class="icon-arrows-glyph-1_bold-up" *ngIf="breadcrumb.isOpen"> </i> </div> <ul class="switcher__list dropdown__list" *ngIf="breadcrumb.isOpen"> <li class="switcher__item dropdown__item" *ngFor="let subparagraph of breadcrumb.subparagraphs"> <a class="switcher__item-href"> {{subparagraph.label}} </a> </li> </ul> </ul>
component class:
export class App { breadcrumbs:any[]; @ViewChild('simpleBreadcrumbs') private _breadcrumbsTemplate: ElementRef; _currentOpenedBreadcrumbs:any; constructor() { this.breadcrumbs = [ { label: 'First', isOpen: false, subparagraphs: [ { label: '1.1' }, { label: '1.2' }] }, { label: 'Second', isOpen: false, subparagraphs: [ { label: '2.1' }, { label: '2.2' }] }]; } toogleStateOfSubparagraphs(breadcrumb) { if (this._currentOpenedBreadcrumbs === breadcrumb) { this._closeSubparagraphs(); this._currentOpenedBreadcrumbs = null; return; } this.breadcrumbs .forEach((bread: IBreadCrumb) => { bread.isOpen = false; if (bread === breadcrumb) { bread.isOpen = true; } }); this._currentOpenedBreadcrumbs = breadcrumb; } _closeSubparagraphs() { this.breadcrumbs .map((bread) => { bread.isOpen = false; return bread; }); } @HostListener('window:keydown', ['$event']) public onEscapeClick(event: KeyboardEvent): void { if (event.which === 27 && !this._breadcrumbsTemplate.nativeElement.contains(event.target as Node)) { this._closeSubparagraphs(); } } @HostListener('document:click', ['$event']) public onOutsideClick(event: Event): void { if (!this._breadcrumbsTemplate.nativeElement.contains(event.target as Node)) { this._closeSubparagraphs(); } } }
source share