Angular 2の使用

Spread.Sheetsは、Angular 2をサポートします。

Angular 2を使用するには、次の手順を実行します。

npmパッケージの使用

次の手順を実行します。

Angular CLIをインストールする
コマンドプロンプトで次のコマンドを実行して、Angular CLIをインストールします。
```
npm install -g @angular/cli
```
Angularアプリを作成する
Angularアプリを作成して、アプリフォルダに移動します。
```
ng new spread-sheets-angular-cli
```
```
cd spread-sheets-angular-cli
```
Spread.Sheetsモジュールをインストールする
Spread.Sheets本体、Angularモジュール、および日本語リソースを、npmからインストールします。
```
npm install @grapecity/spread-sheets
```
```
npm install @grapecity/spread-sheets-angular
```
```
npm install @grapecity/spread-sheets-resources-ja
```

スタイルをインポートする

angular.jsonファイルで、スタイルファイルをインポートします。

{
  ...
  "projects":{
      ...
            "styles": [
              "node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016darkGray.css"
            ],
            ...

Angularモジュールをインポートする

src\app\app.module.tsファイルで、Angularモジュールをインポートします。

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

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

import { SpreadSheetsModule } from "@grapecity/spread-sheets-angular";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SpreadSheetsModule
  ],
  ...

src\app\app.component.htmlファイルに、Spread.Sheetsウィジェットを追加します。

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

src\app\app.component.tsで、Spread.Sheetsウィジェットに表示するデータを用意します。

import { Component } from '@angular/core';
import '@grapecity/spread-sheets-resources-ja';
import * as GC from "@grapecity/spread-sheets";

// カルチャ設定
GC.Spread.Common.CultureManager.culture('ja-jp');

// GC.Spread.Sheets.LicenseKey = "xxxxxxxx";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'spread-sheets-angular-cli';
  spreadBackColor = 'aliceblue';
  sheetName = '商品リスト';
  hostStyle = {
    width: '800px',
    height: '600px'
  };
  data = [
    { 商品名: 'Apple', カテゴリ: 'Fruit', 単価: 1, '購入店': 'Wal-Mart' },
    { 商品名: 'Potato', カテゴリ: 'Fruit', 単価: 2.01, '購入店': 'Other' },
    { 商品名: 'Tomato', カテゴリ: 'Vegetable', 単価: 3.21, '購入店': 'Other' },
    { 商品名: 'Sandwich', カテゴリ: 'Food', 単価: 2, '購入店': 'Wal-Mart' },
    { 商品名: 'Hamburger', カテゴリ: 'Food', 単価: 2, '購入店': 'Wal-Mart' },
    { 商品名: 'Grape', カテゴリ: 'Fruit', 単価: 4, '購入店': 'Sun Store' }
  ];
  columnWidth = 100;

  workbookInit(args){
    let spread:GC.Spread.Sheets.Workbook = args.spread;
    let sheet = spread.getActiveSheet();
  }
}

アプリを実行する
以下のコマンドでアプリを実行します。
```
ng serve -o
```

以下のトピックで、タグ階層とSpread要素について説明します。