CODEWITHSUNDEEP
angularsearchfiltercountngfor
Raj Kumar
Raj Kumar

Reputation: 1

How to show the search results records updated count in UI page in angular

I have a table, fetching the records through API, displaying the records using ngFor in the table. The total records count is also displayed. I am filtering the table by entering keywords in search input and the records get filtered. But the filtered record count is not getting updated.


<div class="table-filter-options">
    <div class="search-bar-div">
        <div class="search-input-wrapper">
            <input type="text" class="form-control" [(ngModel)]="term" placeholder="Search...">
            <i class="fa fa-search"></i>
        </div>
    </div>
</div>
<div class="paginationDiv">
    <div class="pagination-div">
        <pagination-controls class="text-right" (pageChange)="pageNumber = $event"></pagination-controls>
    </div>
    <div class="total">
        <span class="totalCount">{{prodcuts?.length}} Records</span>
    </div>
</div>
<div class="tabl table-responsive">
    <table class="table table-hover">
        <thead>
            <tr>
                <th class="header">S.No</th>
                <th class="header">Product Number</th>
                <th class="header">Company Name</th>
                <th class="header">Created Date</th>
            </tr>
        </thead>
        <tbody *ngIf="prodcuts?.length">
            <ng-container *ngFor="let item of prodcuts | filter:term   | paginate: { itemsPerPage: 10, currentPage: pageNumber }; count as c; let i = index">
                <tr class="cursor">
                    <td>{{i+1}}</td>
                    <td>{{item?.product_number}}</td>
                    <td>{{item?.company_name}}</td>
                    <td>{{item?.created_date | date :'short'}}</td>
                </tr>
            </ng-container>
        </tbody>
    </table>
</div>

TS file HTML file I searched for the filter pipe but there is no any custom pipe in the application. If anyone can help really appreciated.

Upvotes: 0

Views: 465

Answers (1)

bik
bik

Reputation: 339

I would recommend to create a getter in your component:

get totalItemsCount(): number {
   return this.products.length
}

and display it in your template instead of {{prodcuts?.length}}

Upvotes: 0

Related Questions