Angular Datatable not rendering when [dtTrigger] is added in HTML table - Angular 14

Question

When I add the [dtTrigger] = "dtTrigger" in the HTML table, the datatable does not render anymore. I cannot see any datatable features in the page. When I remove [dtTrigger] = "dtTrigger" from the HTML the datatable is perfectly rendered but the data tigger fetures are unavaliable. I am using Angular 14.

Datatable with dtTrigger Datatable without dtTrigger

I followed the angular-datatable documentation to install datatables. The code is mentioned below.

The angular component is mentioned below:

@Component({
  selector: 'app-company-list',
  templateUrl: './company-list.component.html',
  styleUrls: ['./company-list.component.css'],
})
export class CompanyListComponent implements OnInit, OnDestroy {

  // some code

  dtOptions: any = {};
  dtTrigger: Subject<any> = new Subject<any>();

  ngOnInit(): void {
    this.dtOptions = {
      pagingType: 'simple_numbers',
      pageLength: 25,
      lengthChange: false,
      responsive: true,
    };

    this.getCompanies();

  // some code

  getCompanies(): void {
    this.companyService.getAllCompanies().subscribe({
      next: (companies) => {

        // code for fetching data

        this.dtTrigger.next(null);
      },
      error: (response) => {
        console.error(response);
      },
    });
  }

  // some code

  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }

The HTML file is mentioned below:

  <table
    class="table table-striped table-hover table-sm table-bordered"
    *ngIf="companies && companies.length > 0"
    datatable
    [dtOptions]="dtOptions"
    [dtTrigger]="dtTrigger"
  >

  \\ rest of the table

In my angular.json file:

  \\ other code

  "styles": [
              "src/styles.css",
              "node_modules/datatables.net-bs5/css/dataTables.bootstrap5.min.css"
            ],
 "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/datatables.net/js/jquery.dataTables.min.js",
              "node_modules/datatables.net-bs5/js/dataTables.bootstrap5.min.js"
            ]

The package.json file:

"dependencies": {

   \\ other packages

    "angular-datatables": "^14.0.0",
    "datatables.net": "^1.11.3",
    "datatables.net-bs5": "^1.11.3",
    "jquery": "^3.7.0",
}

In app.module.ts file:

\\ other imports

import { DataTablesModule } from 'angular-datatables';

@NgModule({
  declarations: [
    // components
  ],
  imports: [

    // Modules

    DataTablesModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})

Answer 1

dtOptions: DataTables.Settings = {};