Angular2 with Bootstrap Table

Question

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

Günter Zöchbauer · Accepted Answer · 2016-06-06 07:37:09Z

2

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

answered Jun 6, 2016 at 7:37

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 with Bootstrap Table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related