Angular - Order by Table Header

Hi

How can I sort a table by headers? What I tried:

<table mdbTable  class="table table-striped table-sm ">
  <thead>
<tr>
  <th scope="col">
    <div class="form-check">
      <input
        class="form-check-input"
        [disabled]="(PrintJob$ | async).StateId == 7"
        MdbInputDirective
        [ngModel]="selectAll"
        type="checkbox"
        id="selectAllChckbx"
        (ngModelChange)="selectAllA($event)"
      />
      <label class="form-check-label" for="selectAllChckbx"></label>
    </div>
  </th>      
  <th scope="col" [mdbTableSort]="(PrintJob$ | async).HoldmailDocumentDtos" [sortBy]="headElements[0]" i18n="@@DocumentDate">Document Date  <mdb-icon fas icon="sort"></mdb-icon></th>
  <th scope="col" [mdbTableSort]="(PrintJob$ | async).HoldmailDocumentDtos" [sortBy]="headElements[1]" i18n="@@DocumentType">Document Type  <mdb-icon fas icon="sort"></mdb-icon></th>
  <th scope="col" [mdbTableSort]="(PrintJob$ | async).HoldmailDocumentDtos" [sortBy]="headElements[2]" i18n="@@PageNumber">Pages  <mdb-icon fas icon="sort"></mdb-icon></th>
  <th scope="col" [mdbTableSort]="(PrintJob$ | async).HoldmailDocumentDtos" [sortBy]="headElements[3]" i18n="@@AccountNumber">Account/Deposit Nr.  <mdb-icon fas icon="sort"></mdb-icon></th>
</tr>
  </thead>
  <tbody>
<tr
  *ngFor="
    let result of ((PrintJob$ | async).HoldmailDocumentDtos
      | dokartFilter: DokartFilter
      | paginate: { itemsPerPage: 10, currentPage: p });
    let i = index
  "
>
  <td style="width: 10%" scope="row">
    <div class="form-check">
      <input
        class="form-check-input"
        [disabled]="(PrintJob$ | async).StateId == 7"
        MdbInputDirective
        [ngModel]="isSelected(result)"
        type="checkbox"
        id="checkbox{{ i }}"
        (ngModelChange)="updateChecked(result, $event)"
      />
      <label class="form-check-label" for="checkbox{{ i }}"></label>
    </div>
  </td>
      <td style="width: 25%">{{ result.Erstelldatum | date }}</td>
      <td style="width: 35%">{{ result.Titel }}</td>
      <td style="width: 10%">{{ result.Seitenzahl }}</td>
      <td style="width: 25%">{{ result.KontoDepotNr }}</td>
    </tr>
  </tbody>
</table>

Thanks