title: How to apply a directive to elements in innerHtml in angular 5?
body: <p>This is for an Angular 5 / Ionic 3 application.
  I have a div where I display user generated html from a rich text editor:</p>
  
  <pre><code>&lt;div [innerHtml]='text'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This data can include <code>&lt;a href&gt;</code> links for which I need to capture the click event in order to force opening in the system's default browser.</p>
  
  <p>I made a directive that works flawlessly for static content but will not affect anything inside the innerHtml element.</p>
  
  <pre><code>import { Directive, Input, HostListener } from "@angular/core";
  import { InAppBrowser } from "@ionic-native/in-app-browser";
  
  @Directive({
    selector : '[href]'
  })
  export class PreventLink {
  
    @Input() href;
  
    constructor( private iab: InAppBrowser ) {};
  
    @HostListener('click', ['$event'])
    public onClick( event: Event ) {
  
      if( event &amp;&amp; this.href ) {
  
        if( this.href.length &gt; 0 ){
          this.iab.create( this.href, '_system' );
        }
  
        event.preventDefault();
        return false;
      }
    };
  };
  </code></pre>
  
  <p>Any ideas to achieve what I need would be appreciated.</p>