Programmatically updating value of a property of PrimeNg component

Question

I am making use of p-tableHeaderCheckboxavailable in p-table PrimeNG component.

https://www.primefaces.org/primeng-v7-lts/#/table

As per the example over there:-

<p-table [(selection)]="selectedCars">
    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
   <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
        <td>
            <p-tableCheckbox  [value]="rowData"></p-tableCheckbox>
        </td>            
    </tr>
</ng-template>

If I click on the above check box, the `selectedCars` property automatically gets updated and that's great.

The ISSUE

But the thing is I have also added pagination and when making API call, what I do is add the next 10 records and add them in the selectedCars using the below code

ApiCall(){
this.selectedCars.push(...this.gridData); //selectedGridRows
}

This makes the first 10 and now the latest table rows checkbox checked.

BUT p-tableHeaderCheckbox loses it's Check, I figure it will be checked on if table rows are 10 at a time i.e. selectedCars.length == 10

So What I tried is this way:-

Angular - how to get properties?

<p-tableHeaderCheckbox #headerReference>

and then doing this in the .ts

this.headerReference.checked = true;  //(A)

Looking through the source code (it has checked property):- https://github.com/primefaces/primeng/blob/22a7e2699170ab168be12852cd1178f0aa0a3663/src/app/components/table/table.ts#L4051

But unfortunately it doesn't update(as via the (A) statement above) the header checkbox's value if I do it in the same call as the api(when selectedCarsmodel property is getting updated) .

Though it does work if I have a different event which doesn't involve selectedCars or like adding a time out function then also it works.

I even tried out life cycle hook methods like ngAfterViewChecked() still didn't update.