Mostrar Paginator vindo do SpringBoot no angular 6 usando Angular Material Data Table

Olá, estou iniciando eu angular e gostaria de mostrar o resultado de uma pesquisa que está vindo de uma api que construi usando springboot. minha response esta vindo assim:

{,…} content: [{id: 33, dsProjeto: "teste", nomeProjeto: "nometeste", setor: "Insurance",…},…] 0: {id: 33, dsProjeto: "teste2", nomeProjeto: "nometeste2", setor: "Insurance",…} 1: {id: 36, dsProjeto: "teste3", nomeProjeto: "nometeste3",…} 2: {id: 37, dsProjeto: "teste4", nomeProjeto: "nometeste4",…} 3: {id: 38, dsProjeto: "teste5", nomeProjeto: "nometeste5", setor: "Industry",…} empty: false first: true last: true number: 0 numberOfElements: 4 pageable: "INSTANCE" size: 0 sort: {sorted: false, unsorted: true, empty: true} totalElements: 4 totalPages: 1 

A api tá retornando uma Page, o problema é que preciso mostrar isso no front e não sei como faz. Segui esse tutorial: https://blog.angular-university.io/angular-material-data-table/ . Mas ainda não preciso de tudo que está sendo explicao lá, então só peguei as partes que me interessavam. Mas não está funcionando. Não dá erro no meu console do browser, mas não mostra nada a não ser o header da minha table. Alguém poderia me ajudar? Seguem meus códigos do angular:

atestado.component.html:

<mat-table class="mat-elevation-z8" [dataSource]="dataSource"            matSort matSortActive="id" matSortDirection="asc" matSortDisableClear>      <ng-container matColumnDef="dsProjeto">          <mat-header-cell *matHeaderCellDef mat-sort-header>dsProjeto</mat-header-cell>          <mat-cell *matCellDef="let lesson">{{lesson.dsProjeto}}</mat-cell>      </ng-container>       <ng-container matColumnDef="nomeProjeto">          <mat-header-cell *matHeaderCellDef>nomeProjeto</mat-header-cell>          <mat-cell class="description-cell"                   *matCellDef="let lesson">{{lesson.id}}</mat-cell>      </ng-container>        <ng-container matColumnDef="id">          <mat-header-cell *matHeaderCellDef>id</mat-header-cell>          <mat-cell class="description-cell"                   *matCellDef="let lesson">{{lesson.id}}</mat-cell>      </ng-container>       <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>  </mat-table> 

atestado.component.ts:

import { Component, OnInit } from '@angular/core'; import { ProjetoService } from 'src/app/shared/services/projeto.service'; import { AtestadoDataSource } from './atestado.datasource';  @Component({     selector: 'app-atestado',     templateUrl: './atestado.component.html',     styleUrls: ['./atestado.component.scss'] }) export class AtestadoComponent implements OnInit {  dataSource: AtestadoDataSource; displayedColumns= ["id","dsProjeto", "nomeProjeto"];  constructor(private projetoService: ProjetoService) {}  ngOnInit() {     this.dataSource = new AtestadoDataSource(this.projetoService);     this.dataSource.loadAtestados("java,pascal","asc",1,10);  } } 

atestado.datasource.ts

import { CollectionViewer, DataSource } from "@angular/cdk/collections"; import { BehaviorSubject, Observable, of } from "rxjs"; import { catchError, finalize } from "rxjs/operators"; import { ProjetoService } from "src/app/shared/services/projeto.service"; import { Atestado } from "./atestado";   export class AtestadoDataSource implements DataSource<Atestado>{     private atestadoSubject = new BehaviorSubject<Atestado[]>([]);    private loadingSubject = new BehaviorSubject<boolean>(false);    public loading$   = this.loadingSubject.asObservable();     constructor(private projetoService: ProjetoService){     }      loadAtestados(filter: string,               sortDirection: string,               pageIndex: number,               pageSize: number){      this.loadingSubject.next(true);      this.projetoService.buscaAtestados(filter, pageIndex, pageSize).pipe(         catchError(() => of([])),         finalize(() => this.loadingSubject.next(false))     )     .subscribe(atestados => this.atestadoSubject.next(atestados));  }    connect(collectionViewer: CollectionViewer): Observable<Atestado[]> {      return this.atestadoSubject.asObservable();  }   disconnect(collectionViewer: CollectionViewer): void {      this.atestadoSubject.complete();      this.loadingSubject.complete();  } } 

projeto.service.ts:

import { HttpClient, HttpParams } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { map } from "rxjs/operators"; import { mappingUrls } from src/app/shared/commons/constants/constants.service'; import { environment } from '../../../environments/environment'; import { GenericService } from './generic.service';  @Injectable({   providedIn: 'root' }) export class ProjetoService {    private applicationUrl = 'http://' + environment.host + ':' + environment.port + '/api/';   constructor(private httpClient: HttpClient, private genericService: GenericService) {}   public buscaAtestados(filtro,page,size): Observable<any[]> {  return  this.httpClient.get<any>(this.applicationUrl + mappingUrls.projetoService.buscaAtestados, {      params: new  HttpParams ()         .set('filtro',filtro)         .set('page',page.toString())         .set('size',size.toString()) }).pipe(         map(res =>  res["payload"])     ); } 

Agradeço a ajuda!