Angular with PrimeNG Table Paginator totalElements not found

I'm using the Table component with pagination the primeNG, but the pagination totalRecords is always as a page, and the correct one would be 2 according to my api see below.

Here are the details of the call and response codes

response api

API call from Angular

cols: any[];
loadingTable: boolean = false;
totalElements: any;
pagination: any;
budgetList: Budget[] = [];
defaultPageSize = 5;

ngOnInit(): void {

    this.resetPagination(this.defaultPageSize);
    this.findBudgets(null);
    this.cols = [
        {field: 'requester', header: 'Solicitante'},
        {field: 'customer', header: 'Cliente'},
        {field: 'email', header: 'E-mail'},
        {field: 'phone', header: 'Telefone'},
        {field: 'createdAt', header: 'Data Criação'},
        {field: '', header: 'Ações'},
    ];
}

resetPagination(rows: number) {
    this.pagination = {
        sort: 'budgetCode',
        page: 0,
        size: rows,
        order: 1
    };
}

private findBudgets(data?) {
    this.loadingTable = true;
    this.budgetService.findBudgets(this.pagination, (data ? data : null)).subscribe((response) => {
        this.budgetList = response.content;
        this.totalElements = response.totalElements;
        this.loadingTable = false;

    });
}

Component p-table PrimeNG

<p-table #dt
                     [value]="budgetList"
                     [columns]="cols"
                     [loading]="loadingTable"
                     responsiveLayout="scroll"
                     [rowHover]="true"
                     [autoLayout]="true"
                     [rows]="pagination.size"
                     [paginator]="true"
                     [totalRecords]="totalElements"
                     [responsive]="true"
                     dataKey="budgetCode">

                <ng-template pTemplate="header" let-columns>
                    <tr>
                        <th *ngFor="let col of columns">
                            {{col.header}}
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-budget>
                    <tr>
                        <td><span class="p-column-title">Solicitante</span>
                            {{budget.requester}}
                        </td>
                        <td>
                            <span class="p-column-title">Cliente</span>
                            {{budget.customer}}
                        </td>
                        <td>
                            <span class="p-column-title">E-mail</span>
                            {{budget.email }}
                        </td>
                        <td>
                            <span class="p-column-title">Telefone</span>
                            {{budget.phone}}
                        </td>
                        <td>
                            <span class="p-column-title">Data Criação</span>
                            {{budget.createdAt | date: 'dd/MM/yyyy HH:mm:ss'}}
                        </td>
                        <td>
                            <div class="flex">
                                <button pButton pRipple icon="pi pi-pencil" title="Editar"
                                        class="p-button-rounded p-button-warning mr-2" (click)="editBudget(budget)"></button>
                            </div>
                        </td>
                    </tr>
                </ng-template>
            </p-table>

the page total should be 2