Angular 2 innerHTML (click) binding

I had such a large html menu that I decided to binding to be able to make several submenu dropdown and avoid html code duplication. Parent > child (which is parent too) > child...

For the context : In ng2_msList/msList.components.ts, ColumnsManagements.ts is imported as this.ColumnsManagementInstance. The innerHTML menu is displayed properly, in ng2_msList/pages/list.html :

<!-- COLUMNS DROPDOWN BUTTON -->
<ul [innerHTML]="msList.ColumnsManagementInstance.columnMenu" class="dropdown-menu" role="menu"> </ul>

With (in a very simplified version of my code) : (Thanks to this Stack Q)

setHtmlColumnsMenu() {
     var self = this;
     var htmlcolumnsmenu = '';
     [...]
     htmlcolumnsmenu += this.createColumnsList(this.getNoneRelationalColumns(true));

     // which return something like a lot of html content and sometime in it : 
     // <a href="javascript:;" (click)="msList.ColumnsManagementInstance.toogleColumn(column)">
     [...]
     return htmlcolumnsmenu;
}

BUT (click)="msList.ColumnsManagementInstance.toogleColumn(column)" (previously in the html content) is not working anymore. It's writing in the view as simple text in tag (before the innerHtml it was not displayed).

I can't reach a way to make it works again. I test multiple ways to call the function or as I found in web links as on the Ang Doc Section, here for example. These examples call a function which is set in the same file/context very easily (click)="MyAction()" but with my context I can't get a way to call it properly.

The app architecture is maybe be not as Angular2 click call would expect.

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(...)

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>

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.