title: bind to click event to external content when using innerHTML angular
body: <p>Is it possible to bind to an event which is from external content. Content is brought in via <code>innerHTML</code></p>
  
  <p>I have the below code whereby I grab external content and display it within my app.  I'm trying to listen to an onClick event for the <code>&lt;a&gt;</code> tag. The <code>&lt;a&gt;</code> is a route redirect. The listen should reside within my app as I want do some other things before routing to a new route.</p>
  
  <p>I've tried setting a handleClick function but I don't think this is the correct way to do it.</p>
  
  <p>I also thought maybe using a <code>ElementRef</code> - in this case <code>#view</code> but would jquery light be better in this case.</p>
  
  <pre><code>@Component({
    selector: 'overview-details',
    template: `
      &lt;h2&gt;{{ title }}&lt;/h2&gt;
      &lt;div #view [innerHTML]="regCode | sanitizeHtml"&gt;&lt;/div&gt;
    `
  })
  
  ngOninit() {
      this.regcode = `
          &lt;div&gt;
              &lt;h1&gt;RegCode Content&lt;/h1&gt;
              &lt;a class="link" (click)="handleClick()"&gt;Link&lt;/a&gt;
          &lt;/div&gt;
      `;
  }
  
  //within controller
  handleClick(){
      // do some stuff
      // then route
      router.navigate([somewhere....]);
  }
  </code></pre>