Angular | クイックスタート | SpreadJS（スプレッドJS）チュートリアルデモアプリケーション

SpreadJS Angular コンポーネントの使い方

SpreadJSは、Angular環境でも高い生産性を発揮します。いくつかの簡単なステップを踏むだけで、Angularアプリケーションに馴染みのあるExcelライクなスプレッドシートを実装することができます。

手順

Angularアプリケーションを作成します。
- Angular CLIを使用して、新規のAngularアプリケーションを作成します。コマンドプロンプトまたはターミナルから以下のコマンドを実行して、デフォルトのオプションでAngularアプリケーションを作成します。詳細は、Angularリファレンスの Options をご参照ください。
```
ng new sjs-angular-app --defaults
cd sjs-angular-app
```
SpreadJSのnpmパッケージをインストールします。
- SpreadJSのAngularコンポーネントは、@mescius/spread-sheets-angular のnpmパッケージで配布しています。メインの @mescius/spread-sheets パッケージは、コア機能を提供しています。これらのパッケージをインストールするには、アプリケーションのルートフォルダーから次のコマンドを実行します。
```
npm install @mescius/spread-sheets-angular@xx.x.x
npm install @mescius/spread-sheets@xx.x.x

// 日本語リソースをインストールします。
npm install @mescius/spread-sheets-resources-ja@xx.x.x
```
'xx.x.x'の部分には製品のバージョンを指定してください。（例：17.1.10）
バージョンの指定を省略すると最新バージョンがインストールされますが、日本語版での動作保証は日本語版サイトで公開しているバージョンのみとなります。
製品のバージョンについては、製品購入時またはトライアル版でダウンロードした製品コンテンツに含まれるリリースノートをご確認ください。

SpreadJS Angularコンポーネントをアプリケーションに追加し、スプレッドシートを初期化します。
- src\app\app.component.tsを開き、内容を以下のコードに変更します。

import { Component } from '@angular/core';
import * as GC from "@mescius/spread-sheets";
import { SpreadSheetsModule } from "@mescius/spread-sheets-angular";

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SpreadSheetsModule],
  templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'sjs-angular-app';
    spread!: GC.Spread.Sheets.Workbook;
    hostStyle = {
        width:'100%',
        height:'500px'
    };

    // 初期化処理
    workbookInit($event: any) {
        this.spread = $event.spread;
    }
}

アプリケーションにSpreadJS Angularテンプレートを追加します。
- src\app\app.component.html を開き、内容を以下のコードに変更します。
```
<gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="workbookInit($event)">
</gc-spread-sheets>
```
SpreadJSのCSSをアプリケーションに追加します。
- angular.json を開き、グローバルスタイルノードにSpreadJSのCSSを追加します。
```
"styles": [
    "src/styles.css",
    "node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
 ]
```
アプリケーションを実行します。
- ターミナルで以下のコマンドを入力し、アプリケーションを実行します。
```
ng serve
```

値と数式の設定

手順

setValueメソッドを使用してセルの値を設定します。また、setFormulaメソッドで計算式を作成します。

workbookInit($event: any) {
    // spreadを初期化します。
    this.spread = $event.spread;
    let spread = this.spread;
    let sheet = spread.getActiveSheet();
    // テキストを設定します。
    sheet.setText(0,0,"テキスト");
    // 数値を設定します。
    sheet.setValue(1, 0, 2245);
    sheet.setValue(2, 0, 345);
    // 日付型の値を設定します。
    sheet.setValue(3, 0, new Date());
    sheet.getRange(3, 0, 1, 1).formatter('[$-411]ggg ee"年"mm"月"dd"日"');

    // 数式を設定します。（A2とA3セルの合計を計算します。）
    sheet.setFormula(3, 3, '=SUM(A2:A3)');

    // 列幅を設定します。
    sheet.setColumnWidth(0, 150);
}

スタイルの設定

以下の機能を使って、データをより分かりやすく表現しましょう。

手順

このステップでは、シートのスタイルを設定してデータを見やすく表現します。

workbookInit($event: any) {
    // スタイルを設定します。
    sheet.setColumnWidth(1, 200);
    sheet.setColumnWidth(2, 200);
    sheet.getRange(1, 1, 1, 2).backColor("rgb(130, 188, 0)").foreColor("rgb(255, 255, 255)");
    sheet.getRange(3, 1, 1, 2).backColor("rgb(211, 211, 211)");
    sheet.addSpan(1, 1, 1, 2);
    sheet.getRange(1, 1, 6, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {
        all: true
    });
    sheet.getRange(2, 1, 5, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.dotted), {
        inside: true
    });
    sheet.getRange(1, 1, 1, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
}

データ連結

以下のように、データを簡単かつ効率的に連結することができます。

手順

getSheet メソッドを使用して、データ連結を設定するシートを取得します。
セルに連結するデータソースを "new GC.Spread.Sheets.Bindings.CellBindingSource(person); "で作成します。
setBindPath メソッドを使用して、指定されたシート領域の指定されたセルのバインディングパスを設定します。

setDataSource メソッドを使用して、シートのデータソースを設定します。

workbookInit($event: any) {
    var person = { name: '紫 太郎', age: 25, gender: '男性', address: { postcode: '981-3205' } };
    var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person);
    sheet.setBindingPath(2, 2, 'name');
    sheet.setBindingPath(3, 2, 'age');
    sheet.setBindingPath(4, 2, 'gender');
    sheet.setBindingPath(5, 2, 'address.postcode');
    sheet.setDataSource(source);
}