AngularでWijmoを使用する

Angular用のWijmo コンポーネント は、AngularテンプレートマークアップでWijmo コントロール を使用できるようにします。TypeScriptクラス継承機能の観点から見ると、Wijmo Angular コンポーネント は、それらが表す コントロール クラスを「拡張」しています。つまり、Wijmoコンポーネントへの参照を取得した場合、参照されるインスタンスは、コンポーネントのすべてのプロパティ、イベント、メソッドを含むWijmo コントロール であると同時に、Angular コンポーネント でもあります。Wijmoコンポーネントは、コントロールクラスを拡張し、Angularテンプレートマークアップでコントロールを使用できるようにするために必要な機能を追加し、完全に機能する一方向/双方向のプロパティ連結およびイベント連結を備えています。Wijmoコントロール、Wijmo Angularコンポーネント、そしてAngular自体がすべて同じTypeScript言語で記述されているため、この統合はスムーズです。

Angular CLIを使用してアプリケーションを作成する方法については、「Angular & Wijmoクイックスタート」ブログを参照してください。

Wijmo Angularコンポーネントは、名前に「angular2」を含む一連のモジュール（1つのコアライブラリモジュールに対して1つのモジュール）として出荷されています。たとえば、「wijmo.angular2.grid.js」モジュールは、「wijmo.grid.js」コアモジュールに含まれるコントロールに対応するコンポーネントを表します。これらのモジュールは、@mescius/wijmo.angular2.all npmパッケージに含まれており、こちらで説明している方法でインストール可能です。

すべてのWijmoモジュールは、 アンビエント 名を使用してインポートする必要があります。これは、先頭に「@mescius/」が付き、「.js」拡張子を省いたモジュール名です。たとえば、次のimport文は「wijmo.angular2.grid.js」モジュールのコンテンツをインポートします。

import * as wjGrid from '@mescius/wijmo.angular2.grid';

グリッドとデータのインポート

ここでは必要なモジュールをインポートし、Angular DataGridにバインドするデータを定義します。必要な Wijmo モジュールをimportsに追加します。

import { Component, ViewChild } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { WjGridModule, WjFlexGrid } from '@mescius/wijmo.angular2.grid';
@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet, WjGridModule],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent {
    data: any[];
    @ViewChild('flex') flex!: WjFlexGrid;
    constructor() {
        this.data = [
            { id: 0, country: "US", sales: 1318.37, expenses: 4212.41 },
            { id: 1, country: "Germany", sales: 5847.95, expenses: 89.79 },
            { id: 2, country: "UK", sales: 502.55, expenses: 2878.50 },
            { id: 3, country: "Japan", sales: 4675.40, expenses: 488.65 },
            { id: 4, country: "Italy", sales: 2117.57, expenses: 925.60 },
            { id: 5, country: "Greece", sales: 322.10, expenses: 4163.96 }
        ];
    }
    init = () => {
        console.log(this.flex);
    }
}

AngularDataGridのマークアップを追加する

Angular では、マークアップを使用して FlexGrid のすべてのオプションを宣言できます。ここでは、FlexGrid とその列を宣言します。

<wj-flex-grid #flex [itemsSource]="data" style="height: 500px;" (initialized)="init()">
  <wj-flex-grid-column [header]="'国'" [binding]="'country'"></wj-flex-grid-column>
  <wj-flex-grid-column [header]="'売上'" [binding]="'sales'" format="n2"></wj-flex-grid-column>
  <wj-flex-grid-column [header]="'費用'" [binding]="'expenses'" format="n2"></wj-flex-grid-column>
</wj-flex-grid>

Wijmo CSSの追加

Wijmoコントロールを正常に表示および動作させるには、Wijmo CSSファイルをアプリケーションにロードする必要があります。スタイルは @mescius/wijmo.styles npmパッケージに含まれます。Angular CLIアプリケーションでスタイルをロードするには、次のimportステートメントをデフォルトのstyles.cssファイルの先頭に追加します。

@import '@mescius/wijmo.styles/wijmo.css';

その他のAngularの使用方法

AngularアプリケーションでWijmoを使用する方法の詳細については、Angularマークアップ構文のトピックを参照してください。