Angular 2の使用

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

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

Nugetパッケージマネージャーの使用

次の手順を実行します。

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

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

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="Name" width=300></gc-column>
    <gc-column dataField="Category" [width]=columnWidth></gc-column>
    <gc-column dataField="Price" [width]=columnWidth formatter="$ #.00"></gc-column>
    <gc-column dataField="Shopping Place" [width]=columnWidth></gc-column>
  </gc-worksheet>
</gc-spread-sheets>

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

import { Component } from '@angular/core';
import * as GC from "@grapecity/spread-sheets";
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 = 'Goods List';
  hostStyle = {
    width: '800px',
    height: '600px'
  };
  data = [
    { Name: 'Apple', Category: 'Fruit', Price: 1, 'Shopping Place': 'Wal-Mart' },
    { Name: 'Potato', Category: 'Fruit', Price: 2.01, 'Shopping Place': 'Other' },
    { Name: 'Tomato', Category: 'Vegetable', Price: 3.21, 'Shopping Place': 'Other' },
    { Name: 'Sandwich', Category: 'Food', Price: 2, 'Shopping Place': 'Wal-Mart' },
    { Name: 'Hamburger', Category: 'Food', Price: 2, 'Shopping Place': 'Wal-Mart' },
    { Name: 'Grape', Category: 'Fruit', Price: 4, 'Shopping Place': 'Sun Store' }
  ];
  columnWidth = 100;

  workbookInit(args){
    let spread:GC.Spread.Sheets.Workbook = args.spread;
    let sheet = spread.getActiveSheet();
    sheet.getCell(0,0).text("My SpreadJS Angular Project").foreColor("blue");
  }
}

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

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