Angular 5: Get click event on dynamically appended HTML block

Question

This is my code: https://angular-gcmti7.stackblitz.io

In the left side, I have grid patterns which help in generating HTML layout. These patterns have to be dragged on the empty panel.

I'm facing problem in triggering the click event on the menu generated on the elements. I have to append dynamic menu to the dynamically generated HTML blocks. These can be N in numbers depending upon the selection.

I have tried these, but not working: 1) Child component rendering for menu // selectors is appending statically. 2) Direct HTML rendering // HTML block appending statically.

Please suggest a way to get the click event working on these menu icons.

The component's typescript file on which I'm calling generateInnerMenu() function, addBlock() and getColumnDetails() function — Prachi, May 17 '18 at 14:40
@DomenikReitzner I need click function to be dynamic. My elementType variable is rendering properly. — Prachi, May 17 '18 at 14:42
@Prachi yes it will render correctly. But when you use template strings with the backtick (`), just go all the way and use template literals :) [see here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) — Domenik Reitzner, May 17 '18 at 14:44
@Prachi what is it that you want to achieve in functionality? — Domenik Reitzner, May 17 '18 at 14:47
See [this question](https://stackoverflow.com/q/37676726/1009922). — ConnorsFan, May 17 '18 at 14:59
Why are you generating html/DOM in the component? Just write this in your template, and use ngIf to append or not to the DOM. — Christian Benseler, May 17 '18 at 15:06
@ChristianBenseler I have to add this HTML into a dynamically rendered HTML itself. And these are n in number depending upon the dynamically created parent HTML. It can be 1 in number or it can be 100. So I cannot use *ngIf. — Prachi, May 17 '18 at 15:48
@ConnorsFan Not as per my need. There will be multiple child in my case, and those have to been identified uniquely. — Prachi, May 17 '18 at 15:51
You should take a look here https://medium.com/front-end-hacking/dynamically-add-components-to-the-dom-with-angular-71b0cb535286 create components instead of this "raw html" and load them dynamically — Christian Benseler, May 17 '18 at 16:03

Rohit.007 · Accepted Answer · 2018-05-19T07:40:39.203

Your logic seems a little different from the regular Angular development. It took almost a day to try a solution for you but I didn't come with the exact solution but hope the below findings of mine could help you.

The ComponentFactoryResolver's resolveComponentFactory method accepts an Angular Component.
An Article over dynamic HTML injection https://medium.com/@caroso1222/angular-pro-tip-how-to-dynamically-create-components-in-body-ba200cc289e6
In your case, you are injecting HTML into your template, not a component. To inject HTML, save it in a variable and use the DomSanitizer to either sanitize it or bypass the security check

This might help you.

export class main_page{

data: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {}      

  ngOnInit(){ 
    this.getDynamicREST().then((res)=> {
        this.data = this.sanitizer.sanitize(res);
        /* OR */
        this.data = this.sanitizer.bypassSecurityTrustHtml(res);
    })
  };
}

Then, in your template:

<div class="top">
  <div [innerHtml]="data"></div>
</div>

Angular 5: Get click event on dynamically appended HTML block

1 Answers1