Can't get data to display properly

[stephenmatthews]

Hi, im new to angular and I cant seem to get my datatable working properly. Any help would be greatly appreciated!

This is what i'm currently getting - it just says No data available in table and i cant get the sorting or search to work either

component.html

<table datatable [dtOptions]="dtOptions" datatable="ng" class="row-border hover table table-striped table-bordered">
        <thead>
          <tr>
            <th>Name</th>
            <th>Company</th>
            <th>Email</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let client of clients">
            <td>{{ client?.clientName }}</td>
            <td>{{ client?.clientCompany }}</td>
            <td>{{ client?.clientEmail }}</td>
            <td>
              <button class="solid">Edit</button>
              <button class="danger">Delete</button>
            </td>
          </tr>
        </tbody>
    
      </table>

component.ts

dtOptions: DataTables.Settings = {};
  clients: any = [];
  dtTrigger: Subject<any> = new Subject<any>(); 

  constructor(
    public webService: WebService,
    private renderer: Renderer2,
    private router: Router,
    private httpClient: HttpClient
  ) { }

  ngOnInit(): void {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 2
    };
    this.webService.getClients()
      .subscribe(data => {
        this.clients = data;
        console.log(this.clients)
        // Calling the DT trigger to manually render the table
        this.dtTrigger.next;
      });
  }


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

example data used