Bootstrap 4 Datatablejs in Angular4 CLI project

Question

I just created a web app in Angular 4 with the Angular CLI utility.

I want to display in one page of my web app one table with DatatableJs. I got it, but the style is horrible.

I think it's due to a dependency installation problem. I installed Bootstrap 4 and DataTables core via npm.

This my configuration in .angular-cli.json file:

Thanks.

Answer 1

To use Bootstrap 4 with DataTablejs use npm to install Bootstrap 4 package.

npm install --save datatables.net-bs4

Then, Update ".angular-cli.json" files Styles and scripts properties as below.

{
 ........
  "apps": [
    { 
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        //for bootstrap4
        "../node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "../node_modules/datatables.net/js/jquery.dataTables.js",
        //for bootstrap4
        "../node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js"
      ]
      ...
    }
  ],
 .....
}

after above changes, we can use bootstrap4 classes to shows table like a bootstrap4 table for example

<table id='table' datatable [dtOptions]="dtOptions" class="table table-striped table-bordered" cellspacing="0" width="100%">
      </table>

Answer 2

You need the datatables bootstrap4 css.

https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap4.min.css