ERROR Both the table and dtOptions cannot be empty => Angular Datatable

I run an angular application and there is not compilation error. However, the browser sent the following error:

Both the table and dtOptions cannot be empty

I am using angular 17.

The ts file contains the following code:

import { BankAccountsRefComponent } from './bankaccounts-ref.component';
import { app_bank_out } from './../../models/app-bank';
import { Subject } from "rxjs";
import { Component, OnInit, TemplateRef, ViewChild, inject } from '@angular/core';
import { AppBankService } from 'src/app/services/app-bank.service';
import { tblrowcommand } from 'src/app/models/tbl-row-command';
import { ADTSettings,  } from 'angular-datatables/src/models/settings';

@Component({
  selector: 'bankaccounts',
  templateUrl: './bankaccounts.component.html',
  styleUrls: ['./bankaccounts.component.css']
})
export class BankaccountsComponent implements OnInit {

  dtOptions: ADTSettings = {};
  dtTrigger: Subject<ADTSettings> = new Subject<ADTSettings>()
  banks?: Array<app_bank_out>;
  bankservice = inject(AppBankService);
  that=this
  message="";
  constructor() {
  }
  
  onClickRow(bank: any):void {
    this.message = bank.bankId + '' + bank.name;
  }

  @ViewChild('BankAccountsRef') BankAccountsRef: TemplateRef<BankAccountsRefComponent> | undefined;

  ngOnInit(): void {

    setTimeout(() => {

      const self = this;
      this.dtOptions = {
        ajax: (dataTablesParameters: any, callback ) =>{
          this.bankservice.getBankById(0)
          .subscribe(resp => {
            console.log(resp)
            callback({
              recordsTotal: resp.recordsTotal,
              recordsFiltered: resp.recordsFiltered,
              data: resp
            })
          })
        },
        columns:[{
          title:"Id",
          data: "bankId"
        },{
          title: "Bank Name",
          data: "name"
        },{
          title: "Swift / ABA",
          data: "swift_ABA"
        },{
          title: "Address",
          data: "address"
        },{
          title: "Country",
          data: "country"
        },{
          title: "Email",
          data: "email"
        },{
          title: "Phone",
          data: "phone"
        },{
          title: "Contact",
          data: "contact"
        },{
          title: "Actions",
          data: null,
          defaultContent: '',
          // ngTemplateRef: {
          //   ref: this.BankAccountsRef,
          //   context: {
          //     captureEvents: self.onCaptureEvent.bind(self),
          //   }
          // }
        }],
        rowCallback: (row: Node, data: any[] | Object, index: number) => {
          const self = this;
          $("td", row).off("click");
          $("td", row).on('click', () => {
            self.onClickRow(data)
          })
          return row;
        }
      }
  

    })
   
  }

  ngAfterViewInit() {
    setTimeout(() => {
      // race condition fails unit tests if dtOptions isn't sent with dtTrigger
      this.dtTrigger.next(this.dtOptions);
    }, 200);
  }

  onCaptureEvent(event: tblrowcommand) {
    this.message = `Event '${event.cmd}' with data '${JSON.stringify(event.data)}`;
  }

  ngOnDestroy(): void {
    // Do not forget to unsubscribe the event
    this.dtTrigger.unsubscribe();
  }

}

This is the error in the output:

Can somebody help me out?

Thanks

I am trying to list a data though the angular datatable.

I expect to release the list with some functionalities