The directive is simple, to toggle a CSS class to highlight the menu on click event, I want only one menu highlighted right now the behaviour is highlighting all the menu when navigating to another menu, I need to remove the highlight class from the previous menu, how can I do that?

here's my code:

```
import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appHighlightMenu]'
})
export class HighlightMenuDirective {

  constructor(private elem: ElementRef, private renderer: Renderer2) {

  }
  @HostListener('click') onClick() {
    this.highlight('menu-highlight');
  }
  private highlight(className: string) {
    this.renderer.addClass(this.elem.nativeElement, className)
  }
  private removeHighlight(className: string){
    this.renderer.removeClass(this.elem.nativeElement, className)
  }
}

```

**HTML**

```
<div class="p-2 border-right menu"  appHighlightMenu routerLink="/unit-requests">
    <div class="flex-column">
        <div class="text-center"><i class="fa fa-users fa-2x"></i></div>
        <div class="text-center">Requests</div>
    </div>
</div>

<div class="p-2 border-right menu" appHighlightMenu routerLink="/search-requests">
     <div class="flex-column">
         <div class="text-center"><i class="fa fa-align-justify fa-2x"></i></div>
         <div class="text-center">Search</div>
     </div>
</div>

```