title: Use angular pipe to insert DOM clones
body: <p>I'm using angular 5 and I want to dynamically clone DOM templates using a pipe:</p>
  
  <pre><code>&lt;div id="template" style="display:none;"&gt;
     &lt;a routerlink="{{parameter.route}}"&gt;here&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;nav&gt; id="menuItem"&gt;
      {{parameter.text | insertTemplatePipe }}
  &lt;/nav&gt;
  </code></pre>
  
  <p>parameter.text contains a value such as: </p>
  
  <p><code>Please click {{insertTemplate}} to go to the next page.</code></p>
  
  <p>And I want to use the pipe to replace the substring <code>{{insertTemplate}}</code> with the contents of <code>&lt;div id=template"&gt;</code> and most importantly, I expect the routerlink of the anchor tag to work.</p>
  
  <p>I read about accessing in components, such as explained <a href="https://angular-2-training-book.rangle.io/handout/advanced-components/elementref.html" rel="nofollow noreferrer">here</a>, but how can I achieve this in a pipe?</p>