Update content injected via "innerHTML" in Angular

Question

I'm working on an application that has the following infrastructure:

Headless Wordpress used as primary DB
Node.js application used as middleware/backend
Angular for the frontend

I'm in a situation where I need to fetch dynamic content from Wordpress (content of type "Page") for a particular section, the News section.

The problem is this: the news abstract can contain internal links to navigate to certain sections of the website.

This content, once arrived at the frontend, is injected through the "innerHTML" property into a div.

Now, I can't add the "routerLink" property directly on the HTML coming from Wordpress, because Angular sanitizes it.

At the same time, I don't want to remove sanitization process to avoid security issues.

I tried adding the "routerLink" property directly on the frontend, through ViewChild, but the content injected via "innerHTML" seems inert and not susceptible to updates.

Is there any way to fix this?

Thanks

do you have an example of the html coming back from wordpress? — hunter
– hunter, Commented Feb 17, 2023 at 14:23
So you would like to catch click on <a href="/something"> inside innerHTML content, and do router.navigate(['/something'])? — Bojan Kogoj
– Bojan Kogoj, Commented Feb 17, 2023 at 14:24

hunter · Accepted Answer · 2023-02-17 14:29:53Z

0

Try adding a (click) event to the element you're rendering the [innterHTML] to and trap the event and navigate to where it is supposed to go.

<div [innterHTML]="data" (click)="elementClicked($event)"></div>

elementClicked($event: any) {
    $event.stopPropagation();
    const target = $event.target || $event.srcElement || $event.currentTarget;

    if (!target) return;
    
    const href = target.attributes.href;

    if (!href) return;
    // if the url is meant to navigate within the app...
    this.router.navigateByUrl(href);
}

answered Feb 17, 2023 at 14:29

hunter

63.7k19 gold badges115 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Update content injected via "innerHTML" in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related