<input
type="text"
class="form-control"
id="search-text"
[(ngModel)]="searchText"
placeholder="Enter text to search"
autofocus
>
<div class="dropdown-divider m-0"></div>
<ul class="list-group list-group-flush" *ngIf="users$ | async as users">
<li class="list-group-item d-flex justify-content-between align-items-center card-body__headings">
<span class="float-left">{{(users$| async)?.length}} users</span>
</li>
<li
class="list-group-item d-flex justify-content-between align-items-center"
routerLink="userdetail"
*ngFor="let user of users | search: searchText "
>
+++{{user | json}}
<span class="float-left w-100">
<p class="user-initial">{{user.NAME_INITIALS }}</p>
<em class="list-group-item__detail">
{{user.FIRSTNAME}} {{user.LASTNAME}}
<br/>
<em class="list-group-item__email">{{user.EMAIL}}</em>
</em>
</span>
<span class="badge">
<ish-icon icon="user.remove" cssClass="action-icon"></ish-icon>
</span>
</li>
</ul>
where search is the pipe for filtering the data. When i inspected in filter it is returning me the proper search result but it's not rendering on UI. Means the search result is not rendering.
got the answer after searching so long.
HTML
<ul class="list-group list-group-flush" *ngIf="users$ | async as users">
<li class="list-group-item d-flex justify-content-between align-items-center card-body__headings">
<span class="float-left">{{(users$| async)?.length}} users</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center" routerLink="userdetail"
*ngFor="let user of users | search: 'FIRSTNAME,LASTNAME,EMAIL': searchText ">
<span class="float-left w-100">
<p class="user-initial">{{user.NAME_INITIALS }}</p>
<em class="list-group-item__detail">
{{user.FIRSTNAME}} {{user.LASTNAME}}<br />
<em class="list-group-item__email">{{user.EMAIL}}</em>
</em>
</span>
<span class="badge">
<ish-icon icon="user.remove" cssClass="action-icon"></ish-icon>
</span>
</li>
</ul>
Search pipe
public transform(value, keys: string, term: string) {
if (!term) return value;
return (value || []).filter(item => keys.split(',').some(key => item.hasOwnProperty(key) && new RegExp(term, 'gi').test(item[key])));
}