How to parse a html string to native angular template

Question

Currently I'm rendering the html string using innerHtml property after bypassing the angular sanitizing mechanism this is working for rendering the contents. But not able to map the event handlers to a function in angular component.

E.g.the html string will contain a button like below

<button (click)="callme()">Click</button>

the callme function will be part of angular component file. I want this click event to be handled in angular function.

Is it possible to parse this string to html dom and handle the events in angular components.

Sample code which describes this scenario and using angular cdk Portals. https://stackblitz.com/edit/angular-upaudh?file=src%2Fapp%2Fcdk-portal-overview-example.ts

@YongShun No. I've updated the question to provide more clarity — Manoj kumar
– Manoj kumar, Commented May 26, 2021 at 8:35

StPaulis · Accepted Answer · 2021-05-27 09:43:58Z

3

There are 2 ways that you can implement it, it depends from what you want.

The easy way is to use innerHtml input like this:

HTML

<div [innerHTML]="htmlStr"></div>

TS

htmlStr: 'Hello';

If you want to create a dynamic template that will be translated to HTML at build time. Then you have to go with Portals.

PS: In your example (in the comments) you use [innerHtml] and try to bind it in a Portal. Again [innerHtml] will not be translated before runtime so your click event will not be in the same scope as your component. The thing that you ask is an open conversation in github: Issue. For now you can use the alternatives above to solve your case. You can use innerHtml, and then use renderer2 or native element reference to bind click events to your functions, after they have rendered on the view.

edited May 27, 2021 at 9:43

answered May 26, 2021 at 8:25

StPaulis

2,9441 gold badge19 silver badges28 bronze badges

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

5 Comments

Manoj kumar Over a year ago

I'm already using the innerHtml approach but I'm not able to bind the events to functions in angular components. E.g. i need to bind a click event to a function in angular component.ts file. Will check about portals.

StPaulis Over a year ago

You can use innerHtml, and then use renderer2 or native element reference to bind click events to your functions stackoverflow.com/questions/41609937/… ... But Portals are definitely a solution to your problem.

Manoj kumar Over a year ago

When converting from string to html and using the Portals this is not working. stackblitz.com/edit/… Can you check if anything wrong in this

Manoj kumar Over a year ago

is there any way to achieve this?

StPaulis Over a year ago

In your example you use [innerHtml] and try to bind it in a Portal. Again [innerHtml] will not be translated before runtime so your click event will not be in the same scope as your component. The thing that you ask is an open conversation in github: github.com/angular/angular/issues/30294. For now you can use the alternatives above to solve your case. You can use innerHtml, and then use renderer2 or native element reference to bind click events to your functions after thay rendered on the view. Check it out.

Collectives™ on Stack Overflow

How to parse a html string to native angular template

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related