Angular Filter Table Using Custom Pipe Upon Button Click

I have a table which I successfully filter using a custom pipe. The filter is based on two inputs which are together a form. The functionality I want to add is for the filtering no

Solution 1:

You could consider dropping the pipe and instead just filtering the data yourself when the user clicks the button.

First, define a second property that represented the filtered result

let theFilteredData: DataTable[]

Change your binding to bind to theFilteredData instead:

*ngFor="let dPoint of theFilteredData;" //rest of *ngFor not included

In the submit function:

this.theFilteredData = this.theData.filter(row => 
      return row.tStartDate >= minDate && row.tEndDate <= maxDate);

Solution 2:

You can toggle the filtered for loop with a boolean value that is toggled when you click submit:

*.html:

<div>
    <label>Start Date:</label>
      <input type="text" [(ngModel)]="startDateValue">
    </div>
    <label>End Date:</label>
      <input type="text" [(ngModel)]="endDateValue">
    </div>
    <tr *ngIf="filterToggle" *ngFor="let dPoint of theData | searchDates:startDateValue:endDateValue; let idx=index; let even=even;" (click)="onClick(dPoint, idx)">
      <td>{{dPoint.tDataPoint}}</td>
      <td>{{dPoint.tICCP}}</td>
      <td>{{dPoint.tStartDate}}</td>
      <td>{{dPoint.tEndDate}}</td>
    </tr>
    <tr *ngIf="!filterToggle" *ngFor="let dPoint of theData; let idx=index; let even=even;" (click)="onClick(dPoint, idx)">
      <td>{{dPoint.tDataPoint}}</td>
      <td>{{dPoint.tICCP}}</td>
      <td>{{dPoint.tStartDate}}</td>
      <td>{{dPoint.tEndDate}}</td>
    </tr>
    //the button that will execute the filtering
    <button type="submit" class="btn icon-search" [disabled]="!secondForm.valid" (click)="submit()"></button>
</div>

*.ts:

submit() {
  this.filterToggle = !this.filterToggle;
}

Doesnt keep the template code down, but It should work.

Another idea would be to send a boolean 'filterToggle' through the pipe as well, so the pipe itself will not filter unless 'filterToggle' is true. So if you click submit, the toggle should change to true, and the pipe will filter.

so your *ngFor would look like this:

<tr *ngFor="let dPoint of theData | searchDates:startDateValue:endDate:filterToggle; let idx = index; let even=even">
  ...
</tr>

Or, you could just filter your actual data instead of putting it through a pipe.

submit(){
  this.theData = this.theData.filter(data => 
    return data.tStartDate >= this.startDateValue && data.tEndDate <= this.endDateValue);
}

So when you click submit, change your original theData array by filtering it. You may have to play around with the boolean expression that determines what will be filtered. It should keep only the 'data' that has a start date greater or equal to your 'this.startDateValue' and less or equal to your 'this.endDateValue'. However, this would be overwriting your original theData array. So I would create a temporary array so you can revert back to your unfiltered theData.