SpreadJS with Angular

SpreadJS supports Angular, which is a web application framework that uses TypeScript on the client-side.

Note: SpreadJS supports Angular versions 11, 12, 13, 14, 15, and 16.

Angular version 13 has removed the support of IE11.

SpreadJS can be used in an Angular project in the following way:

Using Node Package Manager

This method involves the following steps:

1. Install the Angular CLI globally

   Open the Command Prompt window and type the following command

   npm install -g @angular/cli

2. Create a new project using Angular CLI

   Create a new project using the following command and navigate to the project directory:

   ng new spread-sheets-angular-cli
   cd spread-sheets-angular-cli

3. Install SpreadJS NPM package

   Install the SpreadJS NPM package using the following commands:

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

4. Configure SpreadJS CSS in angular.json

   Configure the SpreadJS 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"
               ],
               ...
             }
             ...
           }
           ...
         }
         ...
       }
     }
     ...
   }

5. Use SpreadJS in an Angular application.

   Modify the app.module.ts for importing the SpreadJS 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 { }

   Modify the app.component.html for viewing the SpreadJS 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>

   Modify the app.component.ts for preparing data for the SpreadJS component as shown below. You can enter a valid SpreadJS license key before initializing the component.

   import { Component } from '@angular/core';
   import * as GC from "@grapecity/spread-sheets";
   
   // Licensing SpreadJS
   var SpreadJSKey = "xxx";          // Enter a valid license key.
   GC.Spread.Sheets.LicenseKey = SpreadJSKey;
   
   @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: { spread: GC.Spread.Sheets.Workbook; }){
       let spread:GC.Spread.Sheets.Workbook = args.spread;
       let sheet = spread.getActiveSheet();
       sheet.getCell(0,0).text("My SpreadJS Angular Project").foreColor("blue");
     }
   }

6. Build and run the project using Angular CLI

   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.

1. Tag Hierarchy

2. Sheet Element

3. Worksheet Element

4. Column Element

5. Excel IO Element

Note: To use the ExcelIO element in SpreadJS with Angular, you need to import the Excel IO module and license it separately using the same license key, for more information refer to Excel IO Element.