title: Angular 6 Renderer.listen to Directive event
body: <p>I am trying to listen to a directive event on an element.  Renderer.listen is not picking up the event.</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;a click-elsewhere #assignmentOptions&gt;
      &lt;pp-click-dropdown [clickElement]="assignmentOptions"&gt;
          &lt;a&gt;Test Button&lt;/a&gt;
      &lt;/pp-click-dropdown&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>pp-click-dropdown.ts - clickElsewhere() is the directive event in the 'click-elsewhere' directive.  This is event is emitting properly.  I am not getting any errors, Renderer.listen is just not picking up the directive event.</p>
  
  <pre><code>import { Component, EventEmitter, Input, Output, Renderer, OnInit } from '@angular/core';
  
  @Component({
      selector: 'pp-click-dropdown',
      templateUrl: 'panelply-click-dropdown.component.html',
  })
  
  export class PanelPlyClickDropdownComponent implements OnInit {
      @Input() clickElement: Element;
      @Output() onDropdownClick: EventEmitter&lt;any&gt; = new EventEmitter();
  
      private renderer: Renderer;
  
      constructor(_renderer: Renderer) {
          this.renderer = _renderer;
      }
  
      ngOnInit() {
          this.renderer.listen(this.clickElement, 'click', (event) =&gt; {
              this.toggleDropDown(event);
          }); // this line is working properly
          this.renderer.listen(this.clickElement, 'clickElsewhere', (event) =&gt; {
              console.log('clicked oustide')
              this.closeDropdown(event);
          }); // this line is not working
      }
  
      toggleDropDown(e) {
          this.isShown = !this.isShown;
          this.onDropdownClick.emit(e);
      }
  
      closeDropdown(event: Object) {
          if (event &amp;&amp; event['value'] === true) {
              this.isShown = false;
          }
      }
  }
  </code></pre>
  
  <p>click-elsewhere.ts (directive)</p>
  
  <pre><code>import { Directive, ElementRef, EventEmitter, OnDestroy, OnInit, Output, HostListener } from '@angular/core';
  import { Subscription } from 'rxjs';
  
  @Directive({
      selector: '[click-elsewhere]'
  })
  
  export class ClickElsewhereDirective implements OnInit, OnDestroy {
      @Output() clickElsewhere: EventEmitter&lt;Object&gt;;
  
      constructor(private _elRef: ElementRef) {
          this.clickElsewhere = new EventEmitter();
      }
  
      @HostListener('document:click', ['$event.target'])
      public onClick(targetElement) {
          const clickedInside = this._elRef.nativeElement.contains(targetElement);
          if (!clickedInside) {
              console.log('clicked outside source')
              this.clickElsewhere.emit(null);
          }
      }
  }
  </code></pre>
  
  <p>Is there something I'm missing here?  Does listen not work because directive events are not DOM events?  Is there a way to do this?</p>