I'm currently facing an issue with my directive that is supposed to turn a list element red when clicked. It works fine, but I also want it to revert back to black when another list item is selected, so only one item stays in red color.
Here is how I've implemented it:
@HostListener('click', ['$event']) clickedInside(event) {
event.preventDefault();
event.stopPropagation();
this.removeBorder();
this.setElementStyleToBold();
if (this.el.nativeElement.contains(event.target)) {
this.clicked = event.target.id;
}
}
Additionally, I have another host listener that should change the color back to black when clicking outside the list:
@HostListener('document:click', ['$event']) clickedOutside(event){
event.preventDefault();
event.stopPropagation();
this.removeBorder();
}
The issue lies in the fact that the remove border function in the clickedInside method is not working as intended. The cursor does not switch back to black on deselection. Here's a link to my code on StackBlitz.