angulartypescriptprimengprimeng-turbotable

How to bind primeng p-inputswitch control in turbo table and perform get and set operations

I have primeng turbo table which can have indefinite number of rows. I have a column "IsActive" that needs to be shown in all rows. I need to use p-inputswitch for "IsActive" column. The issue I am facing is how do I implement p-inputswitch for these many rows.

Ideas: I was thinking to bind value for each column using ngModel where its name will be generated using 'isActive'+ rowid. E.g [(ngModel)] = isActive1 for first row AND [(ngModel)] = isActive2 for second row AND [(ngModel)] = isActive3 for third row and so on and reading these values in .ts file. The complexity is because of indefinite number of rows(lots of 'isActive+n:boolean' should be defined in .ts file which I do not prefer opting for.)

What is best way to achieve it?

Solution

  • You can bind the switch to the field on the item directly, like this:

    <ng-template pTemplate="body" let-product>
    <tr>
        <td>{{ product.name }}</td>
        <td>
            <p-inputSwitch [(ngModel)]="product.test"></p-inputSwitch>
        </td>
    </tr>
</ng-template>

    See this demo.