Angular & SpreadJS クイックスタート

npm -v

npm install -g @angular/cli

ng v

Angular CLI: 13.1.2
Node: 16.15.0
Package Manager: npm 8.9.0
OS: darwin x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1301.2 (cli-only)
@angular-devkit/core         13.1.2 (cli-only)
@angular-devkit/schematics   13.1.2 (cli-only)
@schematics/angular          13.1.2 (cli-only)

ng new spreadjs-angular-app

cd spreadjs-angular-app
ng serve

npm install @grapecity/spread-sheets
npm install @grapecity/spread-sheets-angular
npm install @grapecity/spread-sheets-resources-ja

npm install @grapecity/spread-sheets@15.0.5
npm install @grapecity/spread-sheets-angular@15.0.5
npm install @grapecity/spread-sheets-resources-ja@15.0.5

{
    …
    "projects":{
        …
        "styles": [
            "src/styles.css",
            "nodemodules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
            …

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

// SpreadJS Angularモジュールのインポート
import { SpreadSheetsModule } from '@grapecity/spread-sheets-angular';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    /*このモジュールで利用するモジュールとしてSpreadJSをインポートします*/
    SpreadSheetsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="workbookInit($event)"></gc-spread-sheets>

import { Component } from '@angular/core';

// SpreadJS関連モジュールのインポート
import * as GC from '@grapecity/spread-sheets';
import '@grapecity/spread-sheets-resources-ja';

// SpreadJSに日本語カルチャを設定します
GC.Spread.Common.CultureManager.culture('ja-jp');

// SpreadJSのライセンスキーを設定します
GC.Spread.Sheets.LicenseKey = "（ここにSpreadJSのライセンスキーを設定します）";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'spreadjs-angular-app';
  
  // SpreadJSのホストとなるDOM要素のスタイルを設定します。
  // この変数はgc-spread-sheetsタグのhostStyle変数に参照されます。
  hostStyle = {
    width: '800px',
    height: '500px',
    border: '1px solid #ac9a9a'
  };

  // SpreadJS初期化処理を行います。
  // この関数はgc-spread-sheetsタグの初期化イベントによってコールされます。
  workbookInit(args: { spread: GC.Spread.Sheets.Workbook }) {
    let spread:GC.Spread.Sheets.Workbook = args.spread;
  }
}

ng serve

<!– SpreadJS本体（ワークブック） –>
<gc-spread-sheets>
    <!– ワークシート –>
    <gc-worksheet>
        <!– 列 –>
        <gc-column></gc-column>
    </gc-worksheet>
</gc-spread-sheets>

<gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="workbookInit($event)">
  <gc-worksheet [name]="sheetName" [dataSource]="data">
    <gc-column dataField="商品名" [width]=columnWidth></gc-column>
    <gc-column dataField="カテゴリ" [width]=columnWidth></gc-column>
    <gc-column dataField="購入店" [width]=columnWidth></gc-column>
    <gc-column dataField="単価" [width]=columnWidth formatter="¥ #,###"></gc-column>
  </gc-worksheet>
</gc-spread-sheets>

export class AppComponent {
  title = 'spreadjs-angular-app';

  // SpreadJSのホストとなるDOM要素のスタイルを設定します
  // この変数はgc-spread-sheetsタグのhostStyle変数に参照されます
  hostStyle = {
    width: '800px', 
    height: '250px',
    border: '1px solid lightgray'
  };

  // シートの名前を設定します
  // この変数はgc-worksheetタグのname変数に参照されます
  sheetName = '商品リスト';
  
  // シートにバインドするデータを作成します
  // この変数はgc-worksheetタグのdataSource変数に参照されます
  data = [
    { 商品名: 'デスクトップPC', カテゴリ: 'PC本体', 単価: 128000, '購入店': 'PCショップA' },
    { 商品名: 'ラップトップPC', カテゴリ: 'PC本体', 単価: 249000, '購入店': 'PCショップA' },
    { 商品名: 'マウス', カテゴリ: '周辺機器', 単価: 1980, '購入店': 'PCショップA' },
    { 商品名: 'キーボード', カテゴリ: '周辺機器', 単価: 5680, '購入店': '家電量販店B' },
    { 商品名: 'プリンタ', カテゴリ: '周辺機器', 単価: 14480, '購入店': '家電量販店B' },
    { 商品名: 'SSD', カテゴリ: 'PCパーツ', 単価: 7980, '購入店': 'ネットショップC' },
    { 商品名: 'デスクトップPC', カテゴリ: 'PC本体', 単価: 168000, '購入店': 'PCショップA' },
    { 商品名: 'ラップトップPC', カテゴリ: 'PC本体', 単価: 249000, '購入店': 'PCショップA' },
    { 商品名: 'マウス', カテゴリ: '周辺機器', 単価: 4980, '購入店': 'PCショップA' },
    { 商品名: 'キーボード', カテゴリ: '周辺機器', 単価: 4680, '購入店': '家電量販店B' },
  ];
  columnWidth = 184;

  // SpreadJS初期化処理を行います
  // この関数はgc-spread-sheetsタグの初期化イベントによってコールされます
  workbookInit(args: { spread: GC.Spread.Sheets.Workbook }) {
    let spread:GC.Spread.Sheets.Workbook = args.spread;
    let sheet = spread.getActiveSheet();
  }
}

ng serve