Using Spread.Sheets with Angular

Spread.Sheets can be used in an Angular project in the following way:

Using Nuget Package Manager

This method involves the following steps:

Install the Angular CLI globally
Open the Command Prompt window and type the following command:

npm install -g @angular/cli
Create a new project using Angular CLI
Next, you need to create a new project using the following command:

ng new spread-sheets-angular-cli
Install Spread.Sheets Npm package
Now, you can install the Spread.Sheets Npm package using the following commands:

npm install @grapecity/spread-sheets
npm install @grapecity/spread-sheets-angular

Configure Spread.Sheets CSS in angular.json

Now, you can configure the Spread.Sheets CSS in angular.json as shown below:

{
...
"projects":{
    "spread-sheets-angular-cli":{
      ...
      "architect":{
        ...
        "build":{
          ...
          options:{
            ...
            "styles": [
              "node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016darkGray.css"
            ],
            ...
          }
          ...
        }
        ...
      }
      ...
    }
}
...
}

Use Spread.Sheets in an Angular application.

Now, you can modify the app.module.ts for importing the Spread.Sheets module as shown below:

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],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Now, you can modify the app.component.html for viewing the Spread.Sheets component as shown below:

<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>

Now, you can modify the app.component.ts for preparing data for Spread.Sheets component as shown below:

import { Component } from '@angular/core';
import * as GC from "@grapecity/spread-sheets";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
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;

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");
}
}

Build and run the project using Angular CLI
Next, you can build and run the new project using the following command:

ng serve

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