diff --git a/projects/core/directives/dropdown/dropdown-open.directive.ts b/projects/core/directives/dropdown/dropdown-open.directive.ts index 82b89575451f..3067b0d085cb 100644 --- a/projects/core/directives/dropdown/dropdown-open.directive.ts +++ b/projects/core/directives/dropdown/dropdown-open.directive.ts @@ -1,18 +1,25 @@ -import {Directive, EventEmitter, Input, Output} from '@angular/core'; +import {Directive, EventEmitter, Input, OnChanges, Output} from '@angular/core'; import type {TuiDropdownDirective} from './dropdown.directive'; @Directive({ selector: '[tuiDropdownOpen],[tuiDropdownOpenChange]', }) -export class TuiDropdownOpenDirective { +export class TuiDropdownOpenDirective implements OnChanges { @Input() - set tuiDropdownOpen(open: boolean) { - this.dropdown?.toggle(open); - } + tuiDropdownOpen = false; @Output() readonly tuiDropdownOpenChange = new EventEmitter(); dropdown?: TuiDropdownDirective; + + update(open: boolean): void { + this.tuiDropdownOpen = open; + this.tuiDropdownOpenChange.emit(open); + } + + ngOnChanges(): void { + this.dropdown?.toggle(this.tuiDropdownOpen); + } } diff --git a/projects/core/directives/dropdown/dropdown.directive.ts b/projects/core/directives/dropdown/dropdown.directive.ts index 2acff4c816cc..d10f717d71e1 100644 --- a/projects/core/directives/dropdown/dropdown.directive.ts +++ b/projects/core/directives/dropdown/dropdown.directive.ts @@ -1,5 +1,6 @@ import { AfterViewChecked, + AfterViewInit, ComponentRef, Directive, ElementRef, @@ -47,6 +48,7 @@ import {TuiDropdownOpenDirective} from './dropdown-open.directive'; export class TuiDropdownDirective implements AfterViewChecked, + AfterViewInit, OnDestroy, OnChanges, TuiPortalItem, @@ -97,6 +99,12 @@ export class TuiDropdownDirective this.refresh$.next(); } + ngAfterViewInit(): void { + if (this.open) { + this.toggle(this.open.tuiDropdownOpen); + } + } + ngOnChanges(): void { if (!this.content) { this.toggle(false); @@ -118,11 +126,11 @@ export class TuiDropdownDirective toggle(show: boolean): void { if (show && this.content && !this.dropdownBoxRef) { this.dropdownBoxRef = this.dropdownService.add(this.component); - this.open?.tuiDropdownOpenChange.emit(true); + this.open?.update(true); } else if (!show && this.dropdownBoxRef) { this.dropdownService.remove(this.dropdownBoxRef); this.dropdownBoxRef = null; - this.open?.tuiDropdownOpenChange.emit(false); + this.open?.update(false); } } }