Multiple primeng table in ngFor with selectall checkbox

Question

I'm trying to create dynamic multiple tables using primeng table and ngFor like below

<div *ngFor="...">
    <p-table>
        ...
        //header
        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
        ...

        //body
        <p-tableCheckbox></p-tableCheckbox>
    </p-table>
</div>

Consider we have two tables, generated dynamically; using the data we provided in [value], with two tableHeaderCheckboxes

when we select first tableHeaderCheckbox, first table's tableCheckbox/row checkboxes has to get selected.

when we select second tableHeaderCheckbox, second table's tableCheckbox/row checkboxes has to get selected

like for third, fourth tables appropriately.

Please, help me how to achieve this.

Answer 1

I have created a separate component and then placed the table code in that component, so now as expected selectall checkbox is working now.

    <p-table>
        ...
        //header
        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
        ...

        //body
        <p-tableCheckbox></p-tableCheckbox>
    </p-table>