JSFeeds: sphelp.grapecity.com - Spread.Sheets and Angular

Wednesday, 21 June, 2017 UTC

Spread.Sheets and Angular

Summary

For those of you wanting to use Spread with Angular, we have some great news, you can now use Spread.Sheets in an Angular project.

Use the following steps to create an Angular project with Spread.Sheets.

Create an Angular project using the following commands. The following web site link provides additional information about creating a project. https://github.com/angular/quickstart.
```
git clone https://github.com/angular/quickstart.git
cd quickstart
npm install
npm start
```
Add Spread.Sheets files to the project. a. Create a directory named lib in app directory. b. Copy the following files to the directory.
```
gc.spread.sheets.all.*.*.*.min.js
GC.Spread.Sheets.d.ts
gc.spread.sheets.*.*.*.css
gc.spread.sheets.angular2.*.*.*.js
gc.spread.sheets.angular2.*.*.*.d.ts
```
Note: If you do not put gc.spread.sheets.angular2.*.*.*.d.ts and GC.Spread.Sheets.d.ts in the same directory, then update the reference path in the first line of gc.spread.sheets.angular2.*.*.*.d.ts. Then reference gc.spread.sheets.all.*.*.*.min.js and gc.spread.sheets.*.*.*.css in index.html.

Use Spread.Sheets in the Angular application. a. Modify app.module.ts for importing the Spread.Sheets module.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SpreadSheetsModule } from './lib/gc.spread.sheets.angular2.*.*.*';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule, SpreadSheetsModule],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }

b. Modify app.component.ts to create data for the Spread.Sheets component.

import {Component} from '@angular/core';
@Component({
selector: 'my-app',
template: `<gc-spread-sheets [backColor]="spreadBackColor" [hostStyle]="hostStyle">
<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>`,
})
export class AppComponent {
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;
}

Refresh the sheet to see the data.

You can download the 10.1.3 build, which contains the angular2 files, from the DevChannel after logging in. DevChannel builds are untested and are meant for preview only. It is not recommended to use them in production environments. The latest build can be downloaded here: http://sphelp.grapecity.com/devchannel/.

... more @ sphelp.grapecity.com

sphelp.grapecity.com