1

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

Manoj kumar
  • 227
  • 6
  • 19

1 Answers1

2

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.

StPaulis
  • 2,844
  • 1
  • 14
  • 24
  • 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. – Manoj kumar May 26 '21 at 08:29
  • You can use `innerHtml`, and then use `renderer2` or native element reference to bind click events to your functions https://stackoverflow.com/questions/41609937/how-to-bind-event-listener-for-rendered-elements-in-angular-2 ... But Portals are definitely a solution to your problem. – StPaulis May 26 '21 at 08:33
  • When converting from string to html and using the Portals this is not working. https://stackblitz.com/edit/angular-upaudh?file=src%2Fapp%2Fcdk-portal-overview-example.ts Can you check if anything wrong in this – Manoj kumar May 26 '21 at 16:11
  • is there any way to achieve this? – Manoj kumar May 27 '21 at 08:20
  • 1
    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: https://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. – StPaulis May 27 '21 at 09:42