CODEWITHSUNDEEP
angular
user2713467
user2713467

Reputation: 21

Angular2 with Bootstrap Table

I am playing with Angular2 and bootstrap-table (http://bootstrap-table.wenzhixin.net.cn/). 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

import {Component, OnInit, ElementRef, Renderer} from 'angular2/core';

@Component({
    selector: 'bs-table',
    template: `<table class="table"></table>`
})   
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) => {
                    return '<button class="btn"     (click)="edit()">Edit</button>';                        }
                },
            ],
            data: [
                {id: 1, name: "Test 1"}
            ]
        })
    }
}

Screenshot

Upvotes: 1

Views: 4680

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657118

Angular2 doesn't process HTML added dynamically in any way, therefore (click) won't be bound in your case.

What you can do is

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

Upvotes: 2

Related Questions