Ignite UI for jQuery Angular Wrappers の使い方

Ignite UI for jQuery は jQuery ベースのライブラリですが、Angular 専用のラッパーを提供しています。

Ignite UI for jQuery Angular Wrappers
https://github.com/IgniteUI/igniteui-angular-wrappers

ラッパーのインストール

npm i igniteui-angular-wrappers

ラッパーモジュールのインポート

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { IgniteUIModule } from 'igniteui-angular-wrappers';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
...

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    IgniteUIModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

igGrid のセットアップ

<ig-grid [widgetId]="gridId" [(options)]="gridOptions"></ig-grid>

export class GridComponent implements OnInit {
  gridId = 'grid1';
  gridData = [
    { 'ProductID': 1, 'Name': 'Adjustable Race', 'ProductNumber': 'AR-5381', 'Category': { 'ID': 0, 'Name': 'Food', 'Active': true, 'Date': '\/Date(1059660800000)\/' } },
    { 'ProductID': 2, 'Name': 'Bearing Ball', 'ProductNumber': 'BA-8327', 'Category': { 'ID': 1, 'Name': 'Beverages', 'Active': true, 'Date': '\/Date(1159660800000)\/' } },
    { 'ProductID': 3, 'Name': 'BB Ball Bearing', 'ProductNumber': 'BE-2349', 'Category': { 'ID': 1, 'Name': 'Beverages', 'Active': true, 'Date': '\/Date(1259660800000)\/' } },
    { 'ProductID': 4, 'Name': 'Headset Ball Bearings', 'ProductNumber': 'BE-2908', 'Category': { 'ID': 1, 'Name': 'Beverages', 'Active': true, 'Date': '\/Date(1359660800000)\/' } },
    { 'ProductID': 316, 'Name': 'Blade', 'ProductNumber': 'BL-2036', 'Category': { 'ID': 1, 'Name': 'Beverages', 'Active': false, 'Date': '\/Date(1459660800000)\/' } },
    { 'ProductID': 317, 'Name': 'LL Crankarm', 'ProductNumber': 'CA-5965', 'Category': { 'ID': 1, 'Name': 'Beverages', 'Active': false, 'Date': '\/Date(1559660800000)\/' } },
    { 'ProductID': 318, 'Name': 'ML Crankarm', 'ProductNumber': 'CA-6738', 'Category': { 'ID': 1, 'Name': 'Beverages', 'Active': false, 'Date': '\/Date(1659660800000)\/' } },
    { 'ProductID': 319, 'Name': 'HL Crankarm', 'ProductNumber': 'CA-7457', 'Category': { 'ID': 2, 'Name': 'Electronics', 'Active': false, 'Date': '\/Date(1759660800000)\/' } },
    { 'ProductID': 320, 'Name': 'Chainring Bolts', 'ProductNumber': 'CB-2903', 'Category': { 'ID': 2, 'Name': 'Electronics', 'Active': false, 'Date': '\/Date(1859660800000)\/' } }
  ];
  gridOptions: IgGrid;

  constructor() { }

  ngOnInit() {
    this.gridOptions = {
      autoGenerateColumns: false,
      columns: [
        { headerText: 'Product ID', key: 'ProductID', dataType: 'number' },
        { headerText: 'Product Name', key: 'Name', dataType: 'string' },
        { headerText: 'Product Number', key: 'ProductNumber', dataType: 'string' }
      ],
      dataSource: this.gridData,
      width: '900px',
    };
  }
}

igTextEditor および igNumericEditor のセットアップ

<ig-text-editor [widgetId]="textEditorId" [options]="textEditorOptions">
</ig-text-editor>
<ig-numeric-editor [widgetId]="numericEditorId" [options]="numericEditorOptions">
</ig-numeric-editor>

export class EditorsComponent implements OnInit {
  textEditorId = 'texteditor1';
  textEditorOptions: IgTextEditor;
  numericEditorId = 'numericeditor1';
  numericEditorOptions: IgNumericEditor;

  constructor() { }

  ngOnInit() {
    this.textEditorOptions = {
      placeHolder: 'テキストを入力'
    };
    this.numericEditorOptions = {
      minValue: 0,
      maxValue: 1000
    };
  }
}