CODEWITHSUNDEEP
javascriptangulartypescript
flakfizer
flakfizer

Reputation: 21

How to get a count of filtered records in angular pipe

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

Answers (1)

flakfizer
flakfizer

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

Related Questions