title: Angular 9:Using Angular Datatable with DataTables Buttons extension but dt-button-collection is appending at the end in body?
body: <p>Using Angular Datatable with DataTables Buttons extension but dt-button-collection is appending at the end in body, why?</p>
  <p>There is some issue regarding the css/js.</p>
  <p>How can i resolve the error? Here is my code.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>dtOptions: any = {};
  dtTrigger: any = new Subject();
  
  ngOnInit() {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 10,
      dom: 'Blfrtip',
      buttons: [{
          extend: 'collection',
          text: 'Export Data',
          className: 'exp_d_btn',
  
          buttons: [{
              extend: 'excel',
              text: '&lt;img src="assets/images/xls.png" width="24"&gt;&amp;nbsp; XLS',
              exportOptions: {
                columns: ':visible'
              }
            },
            {
              extend: 'pdf',
              text: '&lt;img src="assets/images/pdf-mis.png" width="24"&gt; &amp;nbsp;PDF',
              exportOptions: {
                columns: ':visible'
              },
              orientation: 'landscape'
            },
            {
              extend: 'csv',
              text: '&lt;img src="assets/images/csv.png" width="24"&gt;&amp;nbsp; CSV',
              exportOptions: {
                columns: ':visible'
              }
            },
  
          ]
        }
  
      ]
    };
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table" id="grid"&gt;
    &lt;thead&gt;
      &lt;tr&gt;head1
      &lt;/tr&gt;
      &lt;tr&gt;head2
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr *ngFor="let val of tableData"&gt;
        &lt;td&gt;{{val.val1}}&lt;/td&gt;
        &lt;td&gt;{{val.val2}}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Here is the dependencies i am using <code>angular.json</code> file</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>"styles": [
    "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
    "node_modules/bootstrap/dist/css/bootstrap.css",
    "node_modules/nprogress/nprogress.css",
    "src/assets/css/bootstrap.min.css",
    "src/assets/css/font-awesome.min.css",
    "src/assets/css/custom.css",
    "src/assets/css/responsive.css",
    "src/assets/css/style.css",
    "src/assets/css/px-pagination.css",
    "src/styles.scss",
    "node_modules/owl.carousel/dist/assets/owl.carousel.min.css",
    "node_modules/owl.carousel/dist/assets/owl.theme.default.min.css",
    "node_modules/owl.carousel/dist/assets/owl.theme.default.css",
    "node_modules/daterangepicker/daterangepicker.css",
    "node_modules/datatables.net-dt/css/jquery.dataTables.css",
    "src/assets/js/jquery-ui-1.12.1/jquery-ui.min.css",
    "src/assets/css/jquery.ui.timepicker.css",
    "node_modules/@ng-select/ng-select/themes/default.theme.css",
    "node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css"
  
  ],
  "scripts": [
    "node_modules/nprogress/nprogress.js",
    "node_modules/jquery/dist/jquery.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js",
    "src/assets/js/jquery-1.12.4.min.js",
    "src/assets/js/add.js",
    "src/assets/js/respond.min.js",
    "node_modules/icheck/icheck.min.js",
    "node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.js",
    "src/assets/js/scrolltopcontrol.js",
    "node_modules/raphael/raphael.min.js",
    "src/assets/js/morris.js-0.5.1/morris.min.js",
    "node_modules/owl.carousel/dist/owl.carousel.min.js",
    "node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js",
    "node_modules/chart.js/dist/Chart.js",
    "src/assets/js/jquery-jvectormap-2.0.5.min.js",
    "src/assets/js/jquery-jvectormap-world-mill-en.js",
    "node_modules/daterangepicker/daterangepicker.js",
    "src/assets/js/opentok.min.js",
    "node_modules/datatables.net/js/jquery.dataTables.js",
    "src/assets/js/jquery-ui-1.12.1/jquery-ui.min.js",
    "src/assets/js/jquery.ui.timepicker.js",
    "node_modules/jszip/dist/jszip.js",
    "node_modules/datatables.net-buttons/js/dataTables.buttons.js",
    "node_modules/datatables.net-buttons/js/buttons.colVis.js",
    "node_modules/datatables.net-buttons/js/buttons.flash.js",
    "node_modules/datatables.net-buttons/js/buttons.html5.js",
    "node_modules/datatables.net-buttons/js/buttons.print.js",
    "node_modules/pdfmake/build/pdfmake.min.js",
    "node_modules/pdfmake/build/vfs_fonts.js"
  
  ]</code></pre>
  </div>
  </div>
  </p>
  <p><code>dt-button-collection</code> is Appending at the end  <a href="https://i.stack.imgur.com/H9Mk4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H9Mk4.png" alt="enter image description here" /></a></p>
  <p>and getting this error on clicking the export button <a href="https://i.stack.imgur.com/OYxFE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OYxFE.png" alt="enter image description here" /></a></p>
  <p>Here is the <code>package.json</code> file</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>"dependencies": {
    "@angular/animations": "~9.1.12",
    "@angular/cdk": "^9.0.1",
    "@angular/common": "~9.1.12",
    "@angular/compiler": "~9.1.12",
    "@angular/core": "~9.1.12",
    "@angular/forms": "~9.1.12",
    "@angular/material": "^9.0.1",
    "@angular/material-moment-adapter": "^10.1.3",
    "@angular/platform-browser": "~9.1.12",
    "@angular/platform-browser-dynamic": "~9.1.12",
    "@angular/router": "~9.1.12",
    "@ng-select/ng-select": "^5.0.3",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "angular-datatables": "^9.0.2",
    "bootstrap": "^4.5.2",
    "bootstrap-datepicker": "^1.9.0",
    "chart.js": "^2.9.3",
    "datatables.net": "^1.10.21",
    "datatables.net-buttons": "^1.7.0",
    "datatables.net-buttons-dt": "^1.7.0",
    "datatables.net-dt": "^1.10.21",
    "daterangepicker": "^3.1.0",
    "glyphicons": "^0.2.0",
    "highcharts": "^8.2.0",
    "highcharts-angular": "^2.8.0",
    "icheck": "^1.0.2",
    "jquery": "^3.5.1",
    "jszip": "^3.6.0",
    "malihu-custom-scrollbar-plugin": "^3.1.5",
    "moment": "^2.27.0",
    "ng2-charts": "^2.4.0",
    "ngx-countdown": "^11.0.0",
    "ngx-daterangepicker-material": "^4.0.1",
    "ngx-pagination": "^5.0.0",
    "ngx-print": "^1.2.0-beta.5",
    "ngx-webcam": "^0.3.0",
    "nprogress": "^0.2.0",
    "opentok": "^2.10.0",
    "owl.carousel": "^2.3.4",
    "pdfmake": "^0.1.70",
    "raphael": "^2.3.0",
    "rickshaw": "^1.7.1",
    "rxjs": "^6.5.5",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.12",
    "@angular/cli": "~9.1.12",
    "@angular/compiler-cli": "~9.1.12",
    "@types/datatables.net": "^1.10.19",
    "@types/datatables.net-buttons": "^1.4.5",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.5.1",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"</code></pre>
  </div>
  </div>
  </p>
  <p>What am i doing wrong here? Is it the version issue?</p>