title: How to add click event to dynamically added html element in typescript
body: <p>I'm building an app in angular 2. I want to add a click event to a dynamically added html element.
  I define a string (contentString), and in this string I define the html element.</p>
  
  <pre><code>var contentString = '&lt;b&gt;' + this.mName + '&lt;/b&gt;&lt;br/&gt; ' + this.mObject.category + '&lt;br/&gt; Click here for more information &lt;button (click)="navigate()"&gt;Navigate here&lt;/button&gt;'; 
  </code></pre>
  
  <p>This string is put inside a html element like this:</p>
  
  <pre><code>var boxText = document.createElement("div");
      boxText.innerHTML = contentString;
  </code></pre>
  
  <p>Although when I inspect the element, it has the click event defined, but it does not trigger.</p>
  
  <p><img src="https://i.stack.imgur.com/YZyAm.jpg" alt="[image 1]"></p>
  
  <p><img src="https://i.stack.imgur.com/5s6Jh.jpg" alt="[image 2]"></p>
  
  <p>on click it should console log</p>
  
  <pre><code>navigate() {
  console.log("eeeehnnananaa");
  }
  </code></pre>
  
  <p>But that does not work.
  Anyone a solution?</p>