I am having trouble removing the 'active' class from a dropdown when an option is selected. I have successfully removed it on document click, but need help with removing it on selection.
TS :
ngAfterViewInit() {
const elem = this.element.nativeElement.querySelector('select');
const option_elem = this.element.nativeElement.querySelectorAll('option');
this.renderer.listen(document.body, 'click', (event) => {
if (event.target == elem) {
this.addClass(elem, 'active');
}
else {
this.removeClass(elem, 'active');
}
});
for(var i=0; i<=option_elem.length; i++){
this.renderer.listen(option_elem, 'click', (event) => {
this.removeClass(elem,'active');
});
}
}
HTML :
<div class="dropdown">
<select class="dropdown-menu" aria-labelledby="dropdownMenuButton" name="menu" id="menu">
<option class="dropdown-item" *ngFor="let item of selectOption" [value]="item.value"> {{item.label}}</option>
</select>
</div>
Any assistance would be greatly appreciated. Thank you!