@HostListener is not performing click event

Question

I have added a dropdown and trying to open it using directive but click is not working with @HostListener. Below is my angular and html code.

import { Directive, HostListener, HostBinding } from '@angular/core';
@Directive({
  selector: '[appDropdowndirective]'
})
export class DropdowndirectiveDirective {

  constructor() { }

  @HostBinding('class.open')
  isOpen = false;

  @HostListener('click', ['$event'])
  toggleOpen(){
    this.isOpen = !this.isOpen;
  }

}

HTML:

<div class="dropdown" appDropdowndirective>
    <button class="dropdown-toggle btn btn-primary">Kontakt und Support
        <i class="fa fa-angle-down" aria-hidden="true"></i>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Kontakt und Support</a></li>
        <li><a href="#">Kontakt und Support</a></li>
        <li><a href="#">Kontakt und Support</a></li>
    </ul>
</div>

Answer 1

Usually when I get something like that it is because I forgot to register the directive in my module