title: To add routerlink to an element dynamically from type script code in angular 2
body: <p>In my Angular application I came across a scenario in which I have to show an activity history for a user as in Facebook's activity log.</p>
  <p>The activity templates may be of different types like:</p>
  <ol>
  <li><strong>KLM</strong> creates subOrder <strong>10463</strong> from Order <strong>2569</strong></li>
  <li><strong>XYZ</strong> deleted subOrder <strong>1046</strong></li>
  <li><strong>ABC</strong> commented on Order <strong>2569</strong></li>
  </ol>
  <p>and so on.</p>
  <p>The bold text will be a link which navigates the user to the user's corresponding profile or particular <code>subOrder</code> or <code>Order</code>.</p>
  <p>In the TypeScript file I created the link for users/actors like KLM, ABC or XYZ as follows:</p>
  <pre class="lang-js prettyprint-override"><code>const tempActorLink = '&lt;a href=/user-profile/' + history.actorId + '/' + history.actorName + '&gt;' + history.actorName + '&lt;/a&gt;';
  </code></pre>
  <p>Then I replace the <code>{actor}</code> string in <code>history</code> with the created link as follows:</p>
  <pre class="lang-js prettyprint-override"><code>history.activity = history.activity.replace('{actor}', tempActorLink);
  </code></pre>
  <p>I did the same when creating <code>Order</code> and <code>subOrder</code> links.</p>
  <p>I used <code>innerHTML</code> to add it to the DOM as shown below:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;span innerHTML=&quot;{{history.activity}}&quot;&gt;&lt;/span&gt;
  </code></pre>
  <p>Due to the use of <code>href</code> the page reloads, which is undesirable.</p>
  <p>I tried to use the <code>routerLink</code> directive as shown in the TypeScript code below:</p>
  <pre class="lang-js prettyprint-override"><code>const tempActorLink = '&lt;a [router-link]=\&quot;[\'/user-profile/' + history.actorId + '/' + history.actorName + '\']\&quot;&gt;' + history.actorName + '&lt;/a&gt;';
  </code></pre>
  <p>I can't see the <code>routerLink</code> directive in the created DOM code.</p>
  <p>Please help me out to dynamically add the links in the DOM with the <code>routerLink</code> directive or some other approach that has the desired effect.</p>