Angular 2 innerHTML (click) binding

I was able to set up click listeners for html that came from an API to innerHtml.

1. The html from the API needed to be wrapped in a div set to not display.

   <div id='wholeHtml' style='display:none;'> <h2>Foo Bar Inc.</h2>... <button class="buttonToClick">Click me</button> </div>

2. The template where the html landed, also needed to be wrapped in targetable div. Note the 'safeHtml' pipe that told Angular that this source was to be trusted (this was an API that I managed).

   <div id="parentDiv"> <div [innerHTML]="apiData | safeHtml"></div> </div>

3. The corresponding componenet used ElementRef and Renderer2 to copy the hidden div from the api (which was prevented from accepting a click listener), paste it into the parent div, set the newly pasted content to display, and apply click listeners.

   import { Component, OnInit, ElementRef, Renderer2 } from '@angular/core'; ...

   export class ExampleComponent implements OnInit { constructor(private elRef: ElementRef, private renderer: Renderer2) {} ngOnInit() {} ngAfterViewInit() { if(document.getElementById('wholeHtml')){ let allContent = this.elRef.nativeElement.querySelector('#wholeHtml'); let parentContainer = this.elRef.nativeElement.querySelector('#parentDiv'); this.renderer.appendChild(parentContainer, allContent); this.renderer.removeStyle(allContent, "display"); let clickButtons = this.elRef.nativeElement.querySelectorAll('.buttonToClick'); for(var i = 0; i < clickButtons.length; i++){ this.renderer.listen(clickButtons[i], 'click', function($event){ functionToCall($event.target); }); }; } } ngOnDestroy() { this.renderer.destroy(); } }

I was using Angular 6, for what it's worth.

That's by design. Angular doesn't process HTML added by [innerHTML]="..." (except sanitization) in any way. It just passes it to the browser and that's it.

If you want to add HTML dynamically that contains bindings you need to wrap it in a Angular2 component, then you can add it using for example ViewContainerRef.createComponent()

For a full example see Angular 2 dynamic tabs with user-click chosen components

A less Angulary way would be to inject ElementRef, accessing the added HTML using

elementRef.nativeElement.querySelector('a').addEventListener(...)

There are two solutions I know to this problem:

1) Using the Renderer2 to add click events on rendering

In this solution the Renderer2 is used to add a click event listener to the element and filter target by its type HTMLAnchorElement.

public ngOnInit() {
  // Solution for catching click events on anchors using Renderer2:
  this.removeEventListener = this.renderer.listen(this.elementRef.nativeElement, 'click', (event) => {
    if (event.target instanceof HTMLAnchorElement) {
      // Your custom anchor click event handler
      this.handleAnchorClick(event);
    }
  });
}

StackBlitz with a demo

2) Using ElementRef and querySelectorAll after view init

In this solution all anchor elements are found from the ElementRef using querySelectorAll and add a custom click handler is added. This has to be done after view initialization so the DOM is rendered and we can query the rendered element.

public ngAfterViewInit() {
  // Solution for catching click events on anchors using querySelectorAll:
  this.anchors = this.elementRef.nativeElement.querySelectorAll('a');
  this.anchors.forEach((anchor: HTMLAnchorElement) => {
    anchor.addEventListener('click', this.handleAnchorClick)
  })
}

StackBlitz with a demo

---

NOTE Please leave a comment on which solution you prefer and why, I actually have a hard time choosing which one I like more.

It may be too late but let me hope that is going to help someone.

Since you want click binding (and probably other bindings) it would be better to skip using [innerHTML]="..." and create an inner component to which you pass the data via @Input() annotation.

Concretely, image you have a component called BaseComponent where you set some HTML code to a variable htmlData :

let htmlData  = '...<button (click)="yourMethodThatWontBeCalled()">Action</button>...'

Then in BaseComponent's html file you bind it like below:

...<div [innerHTML]="htmlData"></div>...

Instead of doing this, you create InnerComponent.ts :

@Component({
 selector: 'inner-component',
 templateUrl: './inner-component.html',
 styleUrls: ['./inner-component.scss']
})
export class InnerComponent {
   @Input()
   inputData: any;

   methodThatWillBeCalled(){
    //do you logic on this.inputData
   }
}

InnerComponent's Html file:

...<button (click)="methodThatWillBeCalled()">Action</button>...

Now in BaseComponent's Html file:

...<inner-component [inputData]="PUT_HERE_YOUR_DATA"></inner-component>