Collapse All Expand All

You can use Spread.Sheets in an Angular 2 project.

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

1. 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
2. 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.

3. 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;
}
4. Refresh the sheet to see the data.

The following topics provide additional information about tag hierarchy and the Spread elements.

• Understanding the Tag Hierarchy
• Understanding the Sheet Element
• Understanding the Worksheet Element
• Understanding the Column Element

 

 

---

Copyright © GrapeCity, inc. All rights reserved.

Send comments on this topic.