Ignite UI for jQuery の igCombo を Angular アプリケーションで利用する

Ignite UI for jQuery 製品で提供されているコンポーネントを Angular アプリケーション内で利用することができます。 Ignite UI for jQuery 製品を Angular アプリケーションで利用するには、igniteui-angular-wrappers というライブラリをインストールし、Ignite UI for jQuery コンポーネントの型定義ファイルなどを用意します。igniteui-angular-wrappers に関する情報は、下記 KB 記事をご覧ください。

Ignite UI for jQuery Angular Wrappers の使い方 – INFRAGISTICS ナレッジベース

igniteui-angular と igniteui-angular-wrappers の違いは何ですか？ – INFRAGISTICS ナレッジベース

今回は、Ignite UI for jQuery で提供されている igCombo コンポーネントを Angular アプリケーションで利用するサンプルを紹介します。

package.json

jquery, @types/jquey, igniteui-angular-wrappers をインストールします。

"dependencies": {
  ...
  "@types/jquery": "^3.3.11",
  ...
  "igniteui-angular-wrappers": "^6.0.2",
  "jquery": "^3.3.1",
  ...
},

app.component.html

igCombo の宣言を行います。

<ig-combo
    [widgetId]="'combo1'"
    [(options)]="options"
    [dataSource]="colors"
    [(ngModel)]="_value">
</ig-combo>

app.component.ts

igCombo にバインドするデータを用意します。

import { Component } from '@angular/core';
import * as jQuery from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  jQuery: any;
  colors = [
    {
      'Text': 'Black', 'Value': 1
    },
    {
      'Text': 'Blue', 'Value': 2
    },
    {
      'Text': 'Brown', 'Value': 3
    },
    {
      'Text': 'Red', 'Value': 4
    },
    {
      'Text': 'White', 'Value': 5
    },
    {
      'Text': 'Yellow', 'Value': 6
    }
  ];
  _value = null;
  options = {
    allowCustomValue: true,
    rendered: (evt, ui) => {
      const input = ui.owner.textInput();
      input.on('input', () => {
        this._value = input.val();
      });
      jQuery('.ui-igcombo-clear').on('click', () => {
        this._value = null;
      });
    }
  };
}