title: How to handle routerLink and (click) received from Input()
body: <p>I want to be able to handle <code>routerLink</code> and <code>(click)</code> logic passed in <code>Input()</code> as <code>string</code>.</p>
  
  <p>Here's what I have:</p>
  
  <p>In file <code>example.component.ts</code> I have:</p>
  
  <pre><code>this.data = {
    render: () =&gt; {
      return `
        &lt;a [routerLink]="details/31"&gt;AAA&lt;/a&gt;
        &lt;div (click)="doConsole()"&gt;BBB&lt;/div&gt;    
      `
    }
  ]
  
  doConsole() {
    console.log('something');
  }
  </code></pre>
  
  <p>In <code>example.component.html</code>:</p>
  
  <pre><code>  &lt;app-my-table [data]="data"&gt;&lt;/app-my-table&gt;
  </code></pre>
  
  <p>File <code>my-table.component.html</code>:</p>
  
  <pre><code>&lt;div [innerHTML]="renderData()&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And <code>my-table.component.ts</code>:</p>
  
  <pre><code>renderData() {
    return data.render()
  }
  </code></pre>
  
  <p>I was hoping that when I click on <code>&lt;a&gt;</code> with <code>AAA</code> I'll go to <code>details/31</code>, and when I click on <code>&lt;div&gt;</code> with <code>BBB</code> I'll see <code>'something'</code> in console.</p>
  
  <p>None of this happends. There's even no "routerLink" or "(click)" in the html when I inspect it in browser.</p>
  
  <p>I've tried to modify <code>renderData</code> function this way:</p>
  
  <pre><code>constructor(private sanitizer: DomSanitizer) {}
  
  renderData() {
    return this.sanitizer.bypassSecurityTrustHtml;
  }
  </code></pre>
  
  <p>and with this I can see "routerLink" and "(click)" in browser, but clicking on them does nothing.</p>
  
  <p>How can I handle situation like this?</p>