How can I add apply button to filter in angular?

Question

Currently, I have a Gender and Impact filter to the table which is able to filter the data on option selected.

For e.g. If you will select Male it will filter male data and the same for female, impact: applicable and not applicable.

Now, I wanted to add an apply button that will join both of them together and filter. Once clicked on the apply button that will filter data combination of both.

Can anyone please help me with the requirement?

Code:

<div class="filter-data clearfix">
    <form #form="ngForm">
      <div class="form-group float-left mr-4">
        <strong>Gender</strong>
        <br>
        <select class="form-control form-control-sm" name="gender" ngModel>
          <option></option>
          <option value="Male">Male</option>
          <option value="Female">Female</option>
        </select>
      </div>
      <div class="form-group float-left">
        <strong>Impact</strong>
        <br>
        <select class="form-control form-control-sm" name="impact" ngModel>
          <option></option>
          <option value="Applicable">Applicable</option>
          <option value="Not Applicable">Not Applicable</option>
        </select>
      </div>
      <div class="form-group float-left mt-4 ml-2">
        <button type="button" class="btn btn-primary btn-sm mr-2">Apply</button>
        <button type="button" class="btn btn-secondary btn-sm">Reset</button>
      </div>
    </form>
  </div>

<table class="table table-sm table-responsive">
      <thead>
        <tr>
          <th>
            <input type="checkbox" name="allNonTrades" (change)="selectAllClicked($event)">
          </th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Email</th>
          <th>Gender</th>
          <th>DOB</th>
          <th>Impact</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr class="record-row" (click)="viewUser(user)" *ngFor="let user of allUser | tableFilter: form.value | paginate: { id: 'listing_pagination', itemsPerPage: 10, currentPage: page, totalItems: totalRecords }">
          <td><input *ngIf="!isEdit"  name="nontrades" [checked]="user.selected" (change)="changeTradesByCategory($event)" [(ngModel)]="user.checked" type="checkbox" (change)="checkboxClicked()"></td>
          <td>{{user.first_name}}</td>
          <td>{{user.last_name}}</td>
          <td>{{user.email}}</td>
          <td>{{user.gender}}</td>
          <td>{{user.dob}}</td>
          <td>{{user.impact}}</td>
          <td>
            <button *ngIf="!isEdit" class="btn btn-primary btn-sm" (click)="editUser(user)">Edit</button>
            <button class="btn btn-primary btn-sm btn-sm ml-2" (click)="deleteUser(user)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>

table-filter.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'tableFilter'
})

export class TableFilterPipe implements PipeTransform {
  transform(list: any[], filters: Object) {
    const keys = Object.keys(filters).filter(key => filters[key]);
    const filterUser = user => keys.every(key => user[key] === filters[key]);
    return keys.length ? list.filter(filterUser) : list;
  }
}

Answer 1

Just add [ngModelOptions]="{updateOn: 'submit'}" in gender and impact select tags. This let form.value to update only on submit and thus changing tableFilter: form.value and filter is applied accordingly.

<select class="form-control form-control-sm" name="gender" ngModel [ngModelOptions]="{updateOn: 'submit'}">


<select class="form-control form-control-sm" name="impact" ngModel [ngModelOptions]="{updateOn: 'submit'}">

Lastly change Apply Button type to submit

<button type="submit" class="btn btn-primary btn-sm mr-2">Apply</button>