Angular

Angularアプリケーションでリボンコンテナを追加するには、次の手順を実行します。

コマンドプロンプトで次のコマンドを実行して、Angular CLIをインストールし、Angularアプリを作成します。
```
npm install -g @angular/cli
ng new designercomponent
cd designercomponent
npm start
```

リボンコンテナを使用するには、以下の必要なSpreadJSのパッケージをインストールします。

npm install @grapecity/spread-excelio
npm install @grapecity/spread-sheets
npm install @grapecity/spread-sheets-barcode
npm install @grapecity/spread-sheets-charts
npm install @grapecity/spread-sheets-languagepackages
npm install @grapecity/spread-sheets-pdf
npm install @grapecity/spread-sheets-print
npm install @grapecity/spread-sheets-shapes
npm install @grapecity/spread-sheets-resources-ja
npm install @grapecity/spread-sheets-pivot-addon
npm install @grapecity/spread-sheets-tablesheet
npm install @grapecity/spread-sheets-designer
npm install @grapecity/spread-sheets-designer-resources-ja
npm install @grapecity/spread-sheets-angular
npm install @grapecity/spread-sheets-designer-angular

次のサンプルコードを使用して、app.module.tsファイルにデザイナとリソースのモジュールをインポートします。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import "@grapecity/spread-sheets-designer-resources-ja";
import { DesignerModule } from "@grapecity/spread-sheets-designer-angular";
@NgModule({
    declarations: [
       AppComponent
    ],
    imports: [
       BrowserModule,
       DesignerModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

次のサンプルコードを使用して、styles.cssファイルにCSSファイルをインポートします。

@import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css';
@import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';

次のサンプルコードを使用して、app.component.htmlファイルにデザイナタグを追加します。
```
<designer [props]="props"></designer>
```

デザイナを構成するには、「props」のパラメータを渡します。

import { Component } from '@angular/core';
import * as GC from '@grapecity/spread-sheets';
import "@grapecity/spread-sheets-print";
import "@grapecity/spread-sheets-shapes";
import "@grapecity/spread-sheets-pivot-addon";
import "@grapecity/spread-sheets-tablesheet";
import '@grapecity/spread-sheets-resources-ja';
import '@grapecity/spread-sheets-designer-resources-ja';
import * as GcDesigner from '@grapecity/spread-sheets-designer';
GC.Spread.Common.CultureManager.culture('ja-jp');

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    designer: any;
    spread: any;
    props = {
       styleInfo: 'width: 100%; height: 900px',
    };
}

アプリケーションを保存して実行します。
```
npm start 
```

SpreadJSインスタンスにアクセスする

designerInitialized イベントを使用してSpreadJSインスタンスにアクセスすることができます。designerInitializedイベントを使用するには、前項の手順 1 ～ 4を完了してから、次の手順を実行します。

5. 次のサンプルコードを使用して、app.component.html ファイルのdesignerInitializedイベントにイベントリスナーを追加します。

<designer (designerInitialized)="afterDesignerInit($event)" [props]="props"></designer>

6. 次のサンプルコードを使用して、app.component.tsファイルを更新します。

export class AppComponent {
    props = {
       styleInfo: "width: 100%; height: 900px",
       config: null
    }
    afterDesignerInit(e: any) {
       //ホストされたSpreadインスタンスです。
       var workbook = e.designer.getWorkbook();
       var sheet = workbook.getActiveSheet();
       sheet.setValue(1, 1, 'Test');
    }
}

7. アプリケーションを保存して実行します。

npm start

ライセンスキーを設定する

Angular使用時は、SpreadJS、リボンコンテナのほか、ExcelIOに対してもライセンスキーの設定が必要となります。ExcelIOのライセンスキーにはSpreadJSのライセンスキーを設定します。

import '@grapecity/spread-sheets-designer-resources-ja';
import * as GC from '@grapecity/spread-sheets';
import '@grapecity/spread-sheets-designer';
import * as ExcelIO from "@grapecity/spread-excelio";
 
var sjsLicense = "sjs-distribution-key";
GC.Spread.Sheets.LicenseKey = sjsLicense;
(ExcelIO as any).LicenseKey = sjsLicense;
 
(GC.Spread.Sheets as any).Designer.LicenseKey = "designer-component-distribution-key";