Angular Spreadsheet の概要

    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 を作成するには、以下のモジュールが必要です。

    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;
        });
    }