title: Angular2 with Bootstrap Table
body: <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>