Angular 2 innerHTML (click) binding
<p>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... </p>

<p>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 : </p>

<pre><code>&lt;!-- COLUMNS DROPDOWN BUTTON --&gt;
&lt;ul [innerHTML]="msList.ColumnsManagementInstance.columnMenu" class="dropdown-menu" role="menu"&gt; &lt;/ul&gt;
</code></pre>

<p>With (in a very simplified version of my code) : (Thanks to this <a href="https://stackoverflow.com/questions/31548311/angular-2-html-binding">Stack</a> Q)</p>

<pre><code>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 : 
     // &lt;a href="javascript:;" (click)="msList.ColumnsManagementInstance.toogleColumn(column)"&gt;
     [...]
     return htmlcolumnsmenu;
}
</code></pre>

<p>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). </p>

<p>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 <a href="https://angular.io/docs/ts/latest/guide/template-syntax.html" rel="noreferrer">Ang Doc Section</a>, <a href="http://victorsavkin.com/post/119943127151/angular-2-template-syntax" rel="noreferrer">here</a> 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.</p>

<p>The app architecture is maybe be not as Angular2 click call would expect.</p>