ng-select becomes unresponsive when binding to Array.filter()

Question

When binding an ng-select component to the result of an Array.filter(), selecting an option from the dropdown causes the page to become unresponsive.

Is there a correct way to bind to a filtered array of items?

StackBlitz example

import { Component } from '@angular/core';

interface IListItem {
  id: number;
  name: string;
}

@Component({
  selector: 'my-app',
  template: `
<ng-select
  [items]="items"
  bindLabel="name"
  placeholder="Select item..."
  [(ngModel)]="selectedItem">
</ng-select>`
})
export class AppComponent  {

  private readonly _items: IListItem[] = [
    { id: 1, name: "One" },
    { id: 2, name: "Two" },
    { id: 3, name: "Three" },
    { id: 4, name: "Four" },
    { id: 5, name: "Five" },
    { id: 6, name: "Six" },
    { id: 7, name: "Seven" },
    { id: 8, name: "Eight" },
    { id: 9, name: "Nine" },
    { id: 10, name: "Ten" }
  ];

  get items(): IListItem[] {
    return this._items.filter(i => i.id % 2 === 0);
  }

  selectedItem: IListItem;
}

Answer 1

Do not use function with ng-select, it gets called for each time which makes your ui unresponsive. Instead assign the filtered results to a variable,

filteredItems  =   this._items.filter(i => i.id % 2 === 0);

STACKBLITZ DEMO