Angular 11: How to add routerlinks to dynamic content

Question

I have an Angular app that fetches html content from an API and displays it with [innerHtml].

Some of the content includes a tags with links to internal app pages, ie. /en/ca/get-help.

I need to convert these generic html a tags into routerlinks so the app won't reload when the links are clicked (as it currently does).

I've tried parsing the html after the page is rendered in the ngAfterViewChecked lifecycle method.

I'm getting all of the a tags with const anchors = document.getElementsByTagName('a');, looping over them and adding the routerlinks like so:

anchors[i].setAttribute('href', `${url}`);
anchors[i].setAttribute('routerlink', `${url}`);
anchors[i].setAttribute('ng-reflect-router-link', `${url}`);

After doing this, the links have the same attributes as the other routerlinks but the app still reloads when these links are clicked.

Would love to hear what the Angular solution to this problem is.

Does [this](https://stackoverflow.com/questions/36310288/add-element-with-routerlink-dynamically) question help you? — Apoorva Chikara, Aug 27 '21 at 18:19
It doesn't look like it is possible, but there are hacks, such as https://stackoverflow.com/a/63965810/1778465 — Get Off My Lawn, Aug 27 '21 at 18:22

Angular 11: How to add routerlinks to dynamic content

0 Answers0