[Fixed] Angular DataTable bootstrap

Issue

I am trying to implement a dataTable.net with bootstrap in a Angular app, but the style is a little bit of like in the image below.
I am using the a pre-built one that I got the code from: https://datatables.net/examples/styling/bootstrap4 but even so the appearance is different.

In angular.json I have this:

        "scripts": [
          "node_modules/jquery/dist/jquery.js",
          "node_modules/datatables.net/js/jquery.dataTables.js",
          "node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js",
          "node_modules/datatables.net-dt/js/dataTables.dataTables.js"
        ]

And anlso trying to aply css to change the colors of the buttons.

Picture problem link

Solution

Solved it by doing this in the angular.json file

Before:

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css",
          "src/assets/icons/fontawesome/css/all.css",
          "node_modules/datatables.net-dt/css/jquery.dataTables.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.js",
          "node_modules/datatables.net/js/jquery.dataTables.js",
          "node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js",
          "node_modules/datatables.net-dt/js/dataTables.dataTables.js"
        ]

After:

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css",
          "src/assets/icons/fontawesome/css/all.css",
          "node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.js",
          "node_modules/datatables.net/js/jquery.dataTables.js",
          "node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js"
        ]