title: Angular replace html content with a link to a page fragment
body: <p>I have a component that is outputting comments on the page. In these comments, there is some HTML <code>&lt;footer&gt;By John Doe on Jan 23, 2018&lt;/footer&gt;</code>.</p>
  
  <p>I am trying to wrap the contents of the footer in an <code>anchor link</code> so that you can jump to the parent communication on the same page.</p>
  
  <p><strong>Component HTML:</strong></p>
  
  <pre><code>&lt;p [innerHTML]="linkComm(comm.Communication, comm)"&gt;&lt;/p&gt;
  </code></pre>
  
  <p><code>comm.communication</code> = <code>Blah Blah Blah &lt;footer&gt;By John Doe on Jan 23, 2018&lt;/footer&gt;</code></p>
  
  <p><strong>Component TS:</strong></p>
  
  <pre><code>    /**
       * Link to parent communication
       * @param message 
       * @param comm 
       */
      linkComm(message, comm){
          let output = message;
          output = output.replace(/&lt;footer&gt;/gi, '&lt;footer&gt;&lt;a (click)="someMethod(comm.CommunicationID)"&gt;');
          output = output.replace(/&lt;\/footer&gt;/gi, '&lt;/a&gt;&lt;/footer&gt;');
          return output;
      }
  </code></pre>
  
  <p>When I take this approach, no <code>click</code> event is being added to the link like I would expect. </p>
  
  <p>I also tried a module suggested here (<a href="https://stackoverflow.com/a/46587554/2628921">https://stackoverflow.com/a/46587554/2628921</a>) that is meant for page scrolling but it doest appear that <code>pageScroll</code> is being added on there either. </p>
  
  <p><code>output = output.replace(/&lt;footer&gt;/gi, '&lt;footer&gt;&lt;a pageScroll href="#commID_'+comm.CommunicationID+'"&gt;');</code></p>
  
  <p>Is this a security issue where only certain attributes can be added to a link? </p>