CODEWITHSUNDEEP
angularbootstrap-table
nix86
nix86

Reputation: 3047

Can't insert a bootstrap table inside an Angular 2 component

I am developing an Angular 2 web application with ASP.NET 5. I want to insert a table inside a component. The table is made using this library:http://bootstrap-table.wenzhixin.net.cn/. I have noticed that if the table is located in a component it doesn't work. meanwhile if it located in the index.html file it works. That may be due to the fact that the links to files bootstrap-table.css and bootstrap-table.js are located in the index, but the index.html should only contain the root component, so I must find a way to make the table work even if it is inside a component. This is the code of the table:

<table data-toggle="table" data-url="data1.json" data-height="299">
    <thead>
        <tr>
            <th data-field="id">Item ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
    </thead>
</table>

The code should be correct because it has been copied from here: http://www.redexperu.com/assets/js/bootstrap-table-master/docs/examples.html.

Upvotes: 3

Views: 1341

Answers (1)

Sierrodc
Sierrodc

Reputation: 887

if you read the source code of the plugin (bootstrap-table.js), you will find that, really at the end, following code bootstrap all table already available in the DOM:

$(function () {
    $('[data-toggle="table"]').bootstrapTable();
})

If you are using angular1(with routing) or angular2(with components) most probably the table is not in the DOM until angular2 requires it.

What you can do is to manually invoke the bootstrapTable() function in the ngAfterViewInit method (https://angular.io/api/core/AfterViewInit#interface-overview)

Upvotes: 1

Related Questions