Angular Spreadsheet の概要

Angular Spreadsheet は、スプレッドシート データの視覚化と編集を可能にします。機能には、アクティブ化、セル編集、条件付き書式設定、選択、クリップボードなどがあります。

サンプル

依存関係

Angular スプレッドシート コンポーネントをインストールするときは、core パッケージと excel パッケージもインストールする必要があります。

npm install --save igniteui-angular-core
npm install --save igniteui-angular-excel
npm install --save igniteui-angular-spreadsheet

モジュールの要件

IgxSpreadsheetComponent を作成するには、以下のモジュールが必要です。 モジュールはアプリケーションのエントリ ポイントに登録する必要があります。

• ExcelModule
• SpreadsheetModule

import { IgxExcelModule } from 'igniteui-angular-excel';
import { IgxSpreadsheetModule } from 'igniteui-angular-spreadsheet';

@NgModule({
    imports: [
        // ...
        IgxExcelModule,
        IgxSpreadsheetModule,
        // ...
    ]
})
export class AppModule {}

使用方法

Angular スプレッドシート モジュールがインポートされたので、次にスプレッドシートの基本設定です。

<igx-spreadsheet #spreadsheet height="500px" width="100%">
</igx-spreadsheet>

Note

次のコード スニペットでは、外部の ExcelUtility クラスを使用して workbook を保存およびロードしています。

以下は、ワークブックを Angular スプレッドシートにロードする方法を示しています。

import { IgxSpreadsheetComponent } from 'igniteui-angular-spreadsheet';
import { ExcelUtility } from 'ExcelUtility';

// ...

@ViewChild("spreadsheet", { read: IgxSpreadsheetComponent })
public spreadsheet: IgxSpreadsheetComponent;

ngOnInit() {
    const excelFile = '../../assets/Sample1.xlsx';
    ExcelUtility.loadFromUrl(excelFile).then((w) => {
      this.spreadsheet.workbook = w;
    });
}