IgxDropDown 仮想ドロップダウン

Ignite UI for Angular 10.2.7 バージョン時点での情報に基づいています。

IgxDropDown では、ドロップダウンリストを仮想化することで大量データを軽快に扱うことができます。仮想化機能は、IgxForDirective を組み合わせることで実現します。

IgxDropDown 仮想ドロップダウン
https://jp.infragistics.com/products/ignite-ui-angular/angular/components/drop-down-virtual

HTML テンプレート

<button class="button" igxButton="raised" [igxToggleAction]="dropdown" [igxDropDownItemNavigation]="dropdown">Item Series</button>
<igx-drop-down #dropdown>
    <div class="drop-down-virtual-wrapper">
        <igx-drop-down-item
            *igxFor="let item of items; index as index; scrollOrientation: 'vertical'; containerSize: itemsMaxHeight; itemSize: itemHeight;"
            [value]="item" [isHeader]="item.header" role="option" [disabled]="item.disabled"
            [index]="index">
            {{ item.name }}
        </igx-drop-down-item>
    </div>
</igx-drop-down>
<div class="selection">Selected Model: <span>{{ dropdown.selectedItem?.value.name }}</span></div>

コンポーネント

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

interface DataItem {
  id: string;
  name: string;
  header: boolean;
  disabled: boolean;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'igx-dropdown-virtualization';
  public items: DataItem[];
  public itemHeight = 48;
  public itemsMaxHeight = 240;

  constructor() {
    const itemsCollection: DataItem[] = [];
    for (let i = 0; i < 50; i++) {
        const series = (i * 10).toString();
        itemsCollection.push({
            id: series,
            name: `${series} Series`,
            header: true,
            disabled: false
        });
        for (let j = 0; j < 10; j++) {
            itemsCollection.push({
                id: `${series}_${j}`,
                name: `Series ${series}, ${i * 10 + j} Model`,
                header: false,
                disabled: j % 9 === 0
            });
        }
    }
    this.items = itemsCollection;
  }
}

スタイル

.drop-down-virtual-wrapper {
  overflow: hidden;
  max-height: 240px;
  // width: 300px; //ドロップダウンリストの幅
}

:host {
  display: flex;
  flex-flow: row;
  margin: 8px;
}

.button {
  width: 180px;
}

.selection {
  line-height: 2.25rem;
  padding: 0px 8px;
}

.igx-drop-down__item {
  padding: 0 0.8rem;
}