Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | 1x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x | import { AfterViewInit, ChangeDetectionStrategy, Component, Injector, Input, OnDestroy } from '@angular/core'; import { Alignment } from '../shared/alignment.enum'; import { projectContent } from '../shared/utility/projection.utility'; import { WvrBaseComponent } from '../shared/wvr-base.component'; /** * The WvrNavList Component presents a navigation list. * Elements within this list must be wvre-nav-li elements and can be either links of action elements. */ @Component({ selector: 'wvr-nav-list-component', templateUrl: './wvr-nav-list.component.html', styleUrls: ['./wvr-nav-list.component.scss'], changeDetection: ChangeDetectionStrategy.Default }) export class WvrNavListComponent extends WvrBaseComponent implements AfterViewInit, OnDestroy { /** The aligned property describing the positioning of the list elements. */ @Input() aligned = Alignment.LEFT; /** Toggles the display of the list horizontally or vertically. */ @Input() vertical: 'true' | 'false' = 'false'; private readonly observer = new MutationObserver(() => { this.project(); }); constructor(injector: Injector) { super(injector); } ngAfterViewInit(): void { this.project(); const element: Element = this.eRef.nativeElement.querySelector('template[nav-list-items]'); Iif (!!element) { this.observer.observe(element, { attributes: false, childList: true, subtree: false }); } } ngOnDestroy(): void { super.ngOnDestroy(); this.observer.disconnect(); } private project(): void { projectContent(this.eRef, 'template[nav-list-items]', 'div[nav-list-items]'); } } |