0

import { Directive, HostListener, HostBinding } from "@angular/core";

@Directive({
    selector: '[appDropdown]'
})
export class DropdownDirective {
    @HostBinding('class.show') isOpen = false;

    @HostListener('click') toggleOpen(){
        this.isOpen = !this.isOpen;
    }
}
<div class="btn-group"
    appDropdown>
      <button type="button" class="btn btn-primary dropdown-toggle">
        Manage Recipe
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li>
          <a href="#">To shopping List</a>
        </li>
        <li>
          <a href="#">Edit Recipe</a>
        </li>
        <li>
          <a href="#">Delete Recipe</a>
        </li>
      </ul>
    </div>

What I want to do show the menu list when I click the button below, but this function is not working.

Please let me know how to solve it.

Thanks in advance.

Seyoung
  • 13
  • 3

1 Answers1

0

The code looks good. I reckon you simply forgot to register (declarations / exports) your DropdownDirective in the corresponding module. Have you checked this?

If this doesn't help try to replace 

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

by

@HostBinding('class.open') isOpen = false;
  • I checked it and I registered them. And also I tried to use both show and open and they don't work.. I use latest version of bootstrap.. is this any problem? – Seyoung Apr 16 '18 at 06:25
  • Maybe there is a difference. Please, have a look at this post: https://stackoverflow.com/questions/41317473/bootstrap-4-in-angular-2-dropdown-not-working –  Apr 16 '18 at 06:48
  • Thanks. I could solve it from the post. I don't use my code but ngbDropdown. :) – Seyoung Apr 16 '18 at 17:06