Как реализовать сортировку таблиц ng-bootstrap, поисковый фильтр и разбиение на страницы, используя данные из API

Question

Я реализую таблицу транзакций, заполненную данными из API, который я создал сам, я хочу сделать ее сортируемой, фильтруемой и разбивкой на страницы. Я пытаюсь сделать это с помощью ng-bootstrap, я видел документацию, но просто не могу заставить ее работать, в полном примере они используют статический массив данных.

Я попытался адаптировать то, что увидел на странице документации: https://ng -bootstrap.github.io / # / компоненты / таблица / примеры # сортируется но я не мог заставить его работать.

// TS

    import { Component, OnInit } from '@angular/core';
    import { NgxSpinnerService } from 'ngx-spinner';

    import { TransactionsService } from '../transactions.service';
    import { Transactions, Career, Faculty, RoleType } from 'src/assets/models';
    import { RegisterService } from '../register.service';
    import { AlertService } from '../alert.service';

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

      content: Transactions;

      analytic = false;
      uniFaculties: Faculty;
      uniCareers: Career;
      uniUsers: RoleType;

      constructor(
        private modalService: NgbModal,
        private spinner: NgxSpinnerService,
        private alertService: AlertService,
        private transactionService: TransactionsService
      ) { }

      ngOnInit() {
        this.spinner.show();
        this.transactionService.getAllTransactions()
          .subscribe(res => {
            this.content = res;
            console.log(this.content); // testing all transaction object

          });
        this.spinner.hide();
      }
    }

// HTML

    <div class="fluid-container admin-transactions" *ngIf="content">
      <h1><span class="badge badge-info header-transactions"><i class="fas fa-exchange-alt"></i> Transacciones</span></h1>
      <table class="table table-hover fixed_header">
        <thead class="thead table-info">
          <tr class="row table-info">
            <th class="col-1 d-flex justify-content-center" scope="col">ID de Transacción</th>
            <th class="col-1 d-flex justify-content-center" scope="col">ID de Usuario</th>
            <th class="col-1 d-flex justify-content-center" scope="col">Tipo</th>
            <th class="col-4 d-flex justify-content-center" scope="col">Fecha</th>
            <th class="col-3 d-flex justify-content-center" scope="col">Descripción</th>
            <th class="col-2 d-flex justify-content-center" scope="col">Monto</th>
          </tr>
        </thead>
        <tbody>
          <tr class="row" *ngFor='let row of content.transactions'>
            <td class="col-1 d-flex justify-content-center id">{{ row.trx_ID }}</td>
            <td class="col-1 d-flex justify-content-center id">{{ row.user_ID }}</td>
            <td class="col-1 d-flex justify-content-center trx" [ngClass]="{'custom-class': row.trx_type === 'RCH' && row.amount !== 0, 'default-color': row.trx_type !== 'RCH'}">{{ row.trx_type}}</td>
            <td class="col-4 d-flex justify-content-center date">{{ row.date | date:'long' }} </td>
            <td class="col-3 d-flex justify-content-center description">{{ row.description }}</td>
            <td class="col-2 d-flex justify-content-center amount" [ngClass]="{'rch-class': row.trx_type === 'RCH' && row.amount !== 0 , 'pay-class': row.trx_type !== 'RCH'}">{{ row.amount | currency }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <hr>