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.
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>
You need the datatables bootstrap4 css.
https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap4.min.css
