Angular2 with Bootstrap Table
<p>I am playing with Angular2 and bootstrap-table (<a href="http://bootstrap-table.wenzhixin.net.cn/" rel="nofollow">http://bootstrap-table.wenzhixin.net.cn/</a>). In bootstrap table, there is formatter function which is responsible to render cell with custom content. I would like to put a button in that column but I can't bind click event to that button</p>

<pre><code>import {Component, OnInit, ElementRef, Renderer} from 'angular2/core';

@Component({
    selector: 'bs-table',
    template: `&lt;table class="table"&gt;&lt;/table&gt;`
})   
export class TableComponent implements OnInit {

    constructor(private _elRef: ElementRef, private _renderer: Renderer) {}

    edit() {
        alert();
    }

    ngOnInit() {
        $(this._elRef.nativeElement.firstChild).bootstrapTable({
            columns: [
                {title: "ID", field: "id"},
                {title: "Name", field: "name"},
                {title: "", formatter: (data) =&gt; {
                    return '&lt;button class="btn"     (click)="edit()"&gt;Edit&lt;/button&gt;';                        }
                },
            ],
            data: [
                {id: 1, name: "Test 1"}
            ]
        })
    }
}
</code></pre>

<p><a href="http://i.stack.imgur.com/3cJac.png" rel="nofollow">Screenshot</a></p>