TS FILES

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { RootInvestTypeObject } from 'src/app/app-module/app-module.module';
import { config } from 'src/app/config';

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

  dtOptions: DataTables.Settings = {};
  investdata: any = [];

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.fetchData()
  }


  fetchData() {

    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 2,
      serverSide: true,
      processing: true,
      search : true,
      searching: true,

      ajax: (dataTablesParameters: any, callback) => {

        console.log('All Params', dataTablesParameters)
        
        this.http.post<RootInvestTypeObject>(
          config.ANSU_INVEST_API,
          dataTablesParameters, {}
        ).subscribe(resp => {
          this.investdata = resp.data;
          console.warn("RES DATA = ", resp.data)

          callback({
            recordsTotal: resp.count,
            recordsFiltered: resp.count,
            data: []
          });
        });
      },
      columns: [
        { data: 'investment_id' },
        { data: 'investment_type' },
        { data: 'ordering' },
        { data: 'status' },
      ],
    };
  }

}

HTML FILE

<table datatable [dtOptions]="dtOptions" class="display" id="example">
    <thead>
        <tr>
            <th>Invetment id</th>
            <th>Investment type</th>
            <th>Ordering</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody *ngIf="investdata?.length != 0">
        <tr *ngFor="let data of investdata">
            <td>{{data.investment_id}}</td>
            <td>{{data.investment_type}}</td>
            <td>{{data.ordering}}</td>
            <td>{{data.status}}</td>
        </tr>
    </tbody>
    <thead>
        <tr>
            <th>Invetment id</th>
            <th>Investment type</th>
            <th>Ordering</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody *ngIf="investdata?.length == 0">
        <tr>
            <td colspan="3" class="no-data-available">No data!</td>
        </tr>
    </tbody>
</table>

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.