Using filterConstraint.value for filter template value binding instead of value

[puschie286]

Currently the table example with custom filters (sample and filter) use the implicit value of the filter template for binding - this is only possible with strictTemplates compiler option disabled but still bad practice ("Template variables are read-only").

Instead we could use filterConstraint.value for value binding - which is already provided as template variable. This would also allow the strictTemplates options to be enabled.

[vieira-brz]

Sure thing! Here’s how you can set up custom filters in your table components more effectively, especially if you're using Angular with strict type checking turned on.

How to Use filterConstraint.value in Your Filters

When you're working with strict templates, Angular makes sure you don't accidentally change your data directly in your templates. It's a great feature because it keeps things tidy and prevents bugs from sneaking in. Let’s walk through how you can adjust your filter setup to align with this:

Step 1: Set Up Your Table and Filter

In your template, define your table and use filterConstraint.value for your filter’s input. This way, you're binding to a part of your model that's meant to handle changes, which keeps Angular happy.

<p-table [value]="items">
  <ng-template pTemplate="header">
    <tr>
      <th>
        <p-columnFilter field="itemName" display="menu">
          <ng-template pTemplate="filter" let-value let-filterConstraint="filterConstraint">
            <input type="text" [(ngModel)]="filterConstraint.value" pInputText>
          </ng-template>
        </p-columnFilter>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData>
    <tr>
      <td>{{ rowData.itemName }}</td>
    </tr>
  </ng-template>
</p-table>

Step 2: Make Sure Your Component is Ready

Your component class should be all set to handle filterConstraint.value. This setup is generally managed by the framework or library you're using, so just make sure it fits into how you manage data.

export class MyComponent {
  items = [{itemName: 'Item1'}, {itemName: 'Item2'}];

  // Any extra logic for filtering would be included here if necessary
}

Step 3: Update and Filter Logic

Angular’s two-way data binding takes care of updating your model automatically when you make changes in the input field. Just ensure that whatever filtering logic you have can read from filterConstraint.value.

This approach not only keeps your code clean but also makes sure it works well with Angular’s strict mode. It's especially handy for apps where code quality and stability are critical.

Conclusion

Adopting filterConstraint.value for handling filter inputs in your tables is a solid move. It uses Angular’s data binding effectively, ensuring your app stays robust and easier to maintain. Plus, it’s just a neat way to keep everything working smoothly under Angular's strict settings.