title: Change model in renderer.listen function in Angular 5
body: <p>I have custom drop-down in my application. I need to handle clicks outside the component for hiding drop-down list. I want to make it dynamically. </p>
  
  <p><code>HostListener</code> is not the case, because it adds event listeners for all dropdown components on the page. So i decided to add and remove listener dynamically with <code>renderer.listener</code>.
  So i have function that fired when user is clicking input element:</p>
  
  <pre><code>onClickInput() {
   if (this.isOpened) {
    return this.isOpened = false;
   }
   this.clickOutsideHandler();
  }
  </code></pre>
  
  <p>Where <code>clickOutsideHandler</code> is:</p>
  
  <pre><code>clickOutsideHandler() {
   this.clickOutside = this.renderer.listen('document', 'click', (evt) =&gt; {
    if (!this.el.nativeElement.contains(evt.target) &amp;&amp; this.isOpened) {
      this.isOpened = false;
      this.cdRef.detectChanges();
      this.clickOutside();
    }
   });
  }
  </code></pre>
  
  <p>Is it the best solution to use <code>this.cdRef.detectChanges()</code>, because angular didn't update the view without it when i change <code>this.isOpened = false;</code> in <code>renderer.listener</code>. Is there better way to do this?</p>