0

I am trying to create a 'Custom Pipe' that adds a relative link to a word(s) from dynamic inputs based on certain pattern (or variable in this case) that has the input.
Example of input: 'Miami is the capital of Florida.' (where 'Miami' is the variable value).
Expected output: 'Miami' redirects to whatever relative link for now (I use routerLink).

For now, I tried using innerHTML property but the word is not clickable.

I reproduced the situation in this Stackblitz: https://stackblitz.com/edit/angular-link-pipes?file=src%2Fapp%2Fhtml.pipes.ts

UPDATE

Using Directives instead of Pipes could be another option.

Intenzion
  • 81
  • 1
  • 7
  • I don't think you can do it with a pipe if this still stands https://stackoverflow.com/questions/41966635/angular-directives-vs-pipes – Jaqen H'ghar Apr 05 '21 at 21:03
  • Thanks @JaqenH'ghar. It seems like a reasonable option. However, I don't have many experiencie with that. Can you please share any possible helpful resource? – Intenzion Apr 05 '21 at 21:22
  • Sorry if I am slow, but I can't see you can benefit anything. RouterLink is already a directive. You could also reuse a ng-template or create a component, but I don't think the syntax will be any simpler than Angular out of the box – Jaqen H'ghar Apr 06 '21 at 06:36
  • if you only want a simple link it's possible of course: https://stackoverflow.com/questions/62319148/display-a-link-in-dynamically-obtained-html-text/62319557#62319557, but if you want to create a "component" on fly -really a `routerlink`is a directive, but it's the same- you can not. You can use an aproach like this another SO: https://stackoverflow.com/questions/64276306/dynamically-add-elements-to-the-editable-div-with-angular-and-anywhere/64277601#64277601 – Eliseo Apr 06 '21 at 07:20

0 Answers0