ngFor filter by text with custom trackby function

Question

ngFor filter by text with custom trackby function

I'm currently developing an angular 4 application and I am dealing with a large array of objects (around 200 rows). To improve user experience, I added a search input field that dynamically filters the displayed content based on what the user types. Here's how it looks in my code:

<input type="text" [(ngModel)]="searchtext" placeholder="Search">
<div *ngFor="let m of (devices | filterEquipments : searchtext)">{{ m.name }}</div>

However, I noticed that the filtering process is quite slow when I start typing. After some research, I found out that using "trackBy" in the ngFor directive can help optimize performance. The challenge now is figuring out how to implement it correctly and whether it will actually make the filtering faster.

Does anyone have suggestions on how to implement a more efficient filtering solution?

angular typescript filter ngfor

Answer 1

Answer №1

Consider incorporating a delay for better performance

<input type="text" [value]="item.task_name"(keyup)="term$.next($event.target.value)">

import ......

import {Subject} from 'rxjs/Subject';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';

@Component{( ... )} export class YourComponent {

  term$ = new Subject<string>();

  constructor() {
   this.term$
     .debounceTime(1000)
     .distinctUntilChanged()
     .switchMap(term => /*perform necessary actions*/);
  }
}

Answer 2

Consider incorporating a delay for better performance

<input type="text" [value]="item.task_name"(keyup)="term$.next($event.target.value)">

import ......

import {Subject} from 'rxjs/Subject';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';

@Component{( ... )} export class YourComponent {

  term$ = new Subject<string>();

  constructor() {
   this.term$
     .debounceTime(1000)
     .distinctUntilChanged()
     .switchMap(term => /*perform necessary actions*/);
  }
}

ngFor filter by text with custom trackby function

Answer №1

Similar questions

Save a collection of interfaces/types in TypeScript

The 'state' property is not found on the 'FetchPeriod' type

Ways to shift the focus away from the current date in the Angular Material Datepicker

Updating the Bootstrap entry dynamically within the @NgModule module

The Nativescript Angular reusable component fails to trigger the (tap) function call on IOS build

The Angular production build is unable to load - Module loading is being blocked due to an unauthorized MIME type ("text/html") being used

In Angular-Cli, the variables @Input and @Output are consistently null until they are assigned

The functionality of Angular router is disrupted when guards yield an Observable as their return value

Transforming an array of HTTP Observables into an Observable that can be piped asynchronously

Is the ID Column in the Minimal Material Table Demo not appearing as expected?

Tips on organizing the object value to be included in its list value using Angular 8

Troubleshooting the issue of the Delete Service not functioning properly within Angular

combine several JSON files into one JSON object with their respective file paths as keys

How to effectively dispatch actions using @ngrx/store: Exploring the benefits and best practices

AngularJS organization by

How to effectively utilize TypeScript in a team environment using both Atom and VSCode?

Is there a way to imitate the typeof operation on an object in TypeScript?

Oops! There seems to be a syntax error near "NOT" in TypeORM

Unable to exclude folder while creating production build is not functioning as intended

Is it possible to synchronize the Lit cached DOM with the live DOM?