angular mat-table сортировка и пагинатор не работают

<mat-form-field> 
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Введите название изготовителя"> 
</mat-form-field> 
 
<div class="mat-elevation-z8"> 
  <table mat-table [dataSource]="customers" matSort> 
    <!-- Id Column --> 
    <ng-container matColumnDef="id" hidden> 
      <th mat-header-cell *matHeaderCellDef hidden> Id </th> 
      <td mat-cell *matCellDef="let element" hidden> {{element.id}} </td> 
    </ng-container> 
    <!-- Name Column --> 
    <ng-container matColumnDef="name"> 
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Название </th> 
      <td mat-cell *matCellDef="let element"> {{element.name}} </td> 
    </ng-container> 
 
    <!-- Address Column --> 
    <ng-container matColumnDef="address"> 
      <th mat-header-cell *matHeaderCellDef> Адрес </th> 
      <td mat-cell *matCellDef="let element"> {{element.address}} </td> 
    </ng-container> 
 
    <!-- Phones Column --> 
    <ng-container matColumnDef="phones"> 
      <th mat-header-cell *matHeaderCellDef> Телефон </th> 
      <td mat-cell *matCellDef="let element"> {{element.phones}} </td> 
    </ng-container> 
 
    <!-- Actions Column--> 
    <ng-container matColumnDef="actions"> 
      <th mat-header-cell *matHeaderCellDef>  </th> 
      <td mat-cell *matCellDef="let element"> 
        <button mat-raised-button color="primary">Редактировать</button> 
        <button mat-raised-button color="warn">Удалить</button> 
       </td> 
    </ng-container> 
 
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> 
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> 
  </table> 
  <mat-paginator [pageSizeOptions]="[3, 5, 10]" showFirstLastButtons></mat-paginator> 
</div> 
 
<button mat-raised-button type="submit">Добавить изготовителя</button>

import { MatModule } from './../mat-module/mat-module.module'; 
import { HttpClient } from '@angular/common/http'; 
import { Component, OnInit, ViewChild } from '@angular/core'; 
import { CustomersClient, Customer } from 'src/app/api-service.service'; 
import { MatSort } from '@angular/material/sort'; 
import { MatTableDataSource } from '@angular/material/table'; 
import { MatPaginator } from '@angular/material/paginator'; 
 
@Component({ 
  selector: 'app-list-customer', 
  templateUrl: './list-customer.component.html', 
  styleUrls: ['./list-customer.component.scss'] 
}) 
export class ListCustomerComponent implements OnInit { 
  customers = new MatTableDataSource(); 
  displayedColumns: string[] = ['id', 'name', 'address', 'phones', 'actions']; 
 
  constructor(private httpClient: HttpClient) { 
    new CustomersClient(httpClient).getCustomers().subscribe(response => { 
      this.customers =  new MatTableDataSource(response); 
    }); 
  } 
 
  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator; 
  @ViewChild(MatSort, {static: true}) sort: MatSort; 
 
  ngOnInit() { 
    this.customers.paginator = this.paginator; 
    this.customers.sort = this.sort; 
  } 
 
  applyFilter(filterValue: string) { 
    this.customers.filter = filterValue.trim().toLowerCase(); 
  } 
 
}