angular - Pipe through large list

Question

So I have a list of 2000+ employees and I need to filter through them. As I currently have it, it goes super slow and lags for 2 seconds. Everytime I type in a letter, it passes that list each time.

Any way to midigate the lag?

Update

This is some sample code:

<div style="margin-bottom:30px;" *ngIf="emulatedList">

   <input type="text" style="width:200px; background-color:#eeeeee;" name="searchText" [(ngModel)]="searchText" placeholder="Filter Dropdown List">

   <select style="background-color:#eeeeee;" [(ngModel)]="selected" placeholder="Emulate Person">
      <option *ngFor="let delegate of emulatedList | filter: searchText; trackBy: trackByName" [ngValue]="delegate.employeeid">
         {{delegate.employeename}}
      </option>
   </select>

   <span>
      <a (click)="addDelegate(selected)" style="background-color:#5B9C64; font-size:16px; color:#ffffff; padding:10px; margin-right:30px; border-radius: 10px;">Add Delegate</a>
   </span>

</div>

The component.ts file:

ngOnInit() {   
this.personsService.getEmulateList().subscribe(data => {
  setTimeout( () => {
    //console.log(data);
    this.emulatedList = data;
  }, 300);
});

Answer 1

You can use a timeout, so that the code is not run until there have been no requests for x seconds

In the example below, although doFiltering is called in a loop 10 times, the console log statement is only printed once, exactly 1 second after the loop has finished

let handle; 

for(var i = 0; i < 10; i++) {
    doFiltering();
}

function doFiltering() {
    // Check if there is a reference to running timeout
    if (handle != null) {
        // Cancel it
        clearTimeout(handle);
    }
    // Start a timeout
    handle = setTimeout(() => {
        // Do you filtering in here
        console.log("Filtering now");
        handle = null;
    }, 1000);
}