I found some code that I've tweaked to suit my needs. The problem I'm facing is that I can't seem to get an accurate record count after entering the Auto Search text. It seems to be working fine for the Group Filters though.
Any assistance would be greatly appreciated.
http://stackblitz.com/edit/ng6-multiple-search-values-q3qgig
<form novalidate [formGroup]="form">
<h3>Auto Search</h3>
<input type="text" class="form-control" #searchText (input)="autoSearch.emit(searchText.value)">
<hr/>
<h3>Group Filter</h3>
<div class="row">
<div class="col-md-3 col-sm-3">
<select class="form-control" formControlName="prefix">
<option value="">Prefix</option>
<option value="MR">MR</option>
<option value="MS">MS</option>
</select>
</div>
<div class="col-md-3 col-sm-3">
<button class="btn btn-primary" (click)="search(form.value)">Search</button>
</div>
</div>
</form>
<table class="table table-responsive">
<tr>
<th>Name</th>
<th>Prefix</th>
<th>Email</th>
<th>Position</th>
<th>Gender</th>
</tr>
<tbody>
<tr *ngFor="let user of filteredUsers | filter: searchByKeyword">
<td>{{ user.name }}</td>
<td>{{ user.prefix }}</td>
<td>{{ user.email }}</td>
<td>{{ user.position }}</td>
<td>{{ user.gender }}</td>
</tr>
</tbody>
</table>
<div>Record Count: {{ filteredUsers.length }}</div>