3

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.

nix86
  • 2,837
  • 11
  • 36
  • 69
  • 1
    Any code as to how you insert this table in the component might help to answer this problem – Poul Kruijt Jun 06 '16 at 13:36
  • Every Angular 2 component has a property called "templateUrl" which indicates the file containing the html code representing the component. The code should be correct because it has been copy-pasted from an example of their website. – nix86 Jun 06 '16 at 13:45

1 Answers1

1

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)

Community
  • 1
  • 1
Sierrodc
  • 845
  • 6
  • 18
  • But if I use the $ symbol inside the ngAfterViewInit method it gets underlined. – nix86 Jun 06 '16 at 14:54
  • But if I move the table code in the index.html file it works right away without needing the bootstrapTable() method invocation. – nix86 Jun 06 '16 at 15:33
  • follow this to use jquery inside angular2 component: http://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular2. Imho, it depends if table is in the dom or not when plugin starts. If you add the table later, widget doesn't run by itself. – Sierrodc Jun 06 '16 at 16:15
  • But how can you invoke the method bootstrapTable() on an html element? JQuery is used to select elements but you can only invoke the methods of the elements. – nix86 Jun 07 '16 at 08:17