Use angular pipe to insert DOM clones

Question

I'm using angular 5 and I want to dynamically clone DOM templates using a pipe:

<div id="template" style="display:none;">
   <a routerlink="{{parameter.route}}">here</a>
</div>

<nav> id="menuItem">
    {{parameter.text | insertTemplatePipe }}
</nav>

parameter.text contains a value such as:

Please click {{insertTemplate}} to go to the next page.

And I want to use the pipe to replace the substring {{insertTemplate}} with the contents of <div id=template"> and most importantly, I expect the routerlink of the anchor tag to work.

I read about accessing in components, such as explained here, but how can I achieve this in a pipe?

Answer 1

Pipes transform strings into strings, they are not meant to know about DOM. You should create a component.

<menulink [text]="parameter.text"></menulink>

Just "ng generate component MenuLink"

Add your html to the template and and text as an input in the typescript.

@Input text;