title: Angular 5. How to dynamically add links to strings containing a certain tag. like '@'
body: <p>I have a template view which looks like this</p>
  
  <pre><code>&lt;div class="post-content"&gt;
        &lt;p&gt;{{ post.content }}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>where post.content is a type of string. </p>
  
  <p>The string may or may not contain one or more @ tag which references different users. example: '@username'. I want to make this tag clickable with a link. Sort of insert it as an anchor tag:</p>
  
  <pre><code>&lt;a&gt;@username&lt;/a&gt;
  </code></pre>
  
  <p>so far I have tried to string manipulate it manually, and inserting the anchor tag inside the string. However this just shows up as plain text in the view. </p>
  
  <p>How do I go about this in Angular 5?</p>