Reputation: 21
I'm using code I found here and have modified for my purposes. My only issue is I can't get an accurate count of records after the Auto Search text has been entered. It works ok for the Group Filters though.
Appreciate any help.
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>Count: {{ filteredUsers.length }}</div>
Upvotes: 1
Views: 5794
Reputation: 21
Found the answer at https://stackoverflow.com/a/49038992/11248888
In the component ts added a field that will hold the current count
filteredCount = { count: 0 };
In the component html added filteredCount as a parameter to the filter pipe
<tr *ngFor="let user of filteredUsers | filter:searchByKeyword:filteredCount">
interpolate filterMetadata.count into the element that displays the number of records displayed.
<div>AutoSearch Count: {{filteredCount.count}}</div>
In the filter pipe added the filteredCount .count field when done with filtering
transform(items, ..., filterMetadata) {
// filtering
let filteredItems = filter(items);
filteredCount.count = filteredItems.length;
return filteredItems;
}
Upvotes: 1