Creating custom dropdown component in Angular

I am trying to create my own dropdown component. The problem is, my dropdown works, but I have a few components which use this dropdown. When I click on their toggle buttons, multiple instances of dropdown menu is opened. Why is that happenning?

Here's the plunker

I want to see only one instance of dropdown visible at a time. My logic responsible for closing/opening dropdown:

@HostListener('document:click', ['$event'])
clickout($event) {
  if (this.eRef.nativeElement.contains($event.target)) {
    console.log('clicked inside!');
  } else {
    console.log('clicked outside!');
    if (this.isOpen) {
      this.isOpen = false;
    }
  }
}

And toggling:

@HostListener('click', ['$event'])
click($event) {
  const { offsetX, clientX, offsetY, clientY } = $event;
  const distances = {
    left: clientX - offsetX,
    top: clientY - offsetY
  };

  $event.stopPropagation();
  this.dropdown.toggle(distances);
}

How can I prevent opening another instance of dropdown while one is already opened? I want to close that and open another in a new place.