I have been working on a custom dropdown directive in Angular that I can attach to any DOM element. Below is the code for my directive:
import { Directive, HostListener } from '@angular/core';
@Directive({
selector: '[appDropdown]'
})
export class DropdownDirective {
constructor() { }
isOpen: boolean = false;
@HostListener('click') toggle() {
if (this.isOpen === true) {
this.hide();
} else {
this.show();
}
this.isOpen = !this.isOpen;
}
private show() {
// Need help with what to implement here
}
private hide() {
// Need help with what to implement here
}
}
This directive is designed to respond to clicks on the element it is applied to. When a click event is detected, I want to toggle the visibility of the dropdown element within the same container as the element with the directive. A simplified version of the HTML structure is as follows:
<a appDropdown>Dropdown</a>
<ul class="dropdown"> <--- How can I manipulate the display property of this element when clicking the anchor to show/hide the dropdown?
<li><a>Option A</a></li>
<li><a>Option B</a></li>
</ul>
I have checked the Angular documentation thoroughly but couldn't find a clear solution. Any assistance would be greatly appreciated. Thank you!