title: Send CustomEvent from web component to Angular
body: <p>I have a web component that emits a <code>CustomEvent</code> to notify other components about a tenant change of the user.</p>
  
  <pre><code>this.dispatchEvent(new CustomEvent('tenant-changed', { 
     detail: { 
         tenant: newTenant 
     }, 
     bubbles: true, 
     composed: true 
  })); 
  </code></pre>
  
  <p>I want to use this web component in an Angular 6 application. I tried to register for the <code>CustomEvent</code>, but somehow the Angular component does not get notified. I tried the following two approaches</p>
  
  <pre><code>ngOnInit() { 
       this.renderer.listen(this.elementRef.nativeElement, 'tenant-changed', (event) =&gt; { 
           this.changeTenant(event); 
      }) 
  
      this.elementRef.nativeElement.queryElement('#my-filter').addEventListener('tenant-changed', this.changeTenant.bind(this)); 
   } 
  </code></pre>
  
  <p>Or isn't this approach possible at all?</p>