SpreadJS Documentation
SpreadJS Documentation / Developer's Guide / JavaScript Frameworks / SpreadJS with Angular
In This Topic
    SpreadJS with Angular
    In This Topic

    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

      Next, you need to create a new project using the following command:

      ng new spread-sheets-angular-cli
         
    3. Install SpreadJS Npm package

      Now, you can 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

      Now, you can 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.

      Now, you can 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 { }

      Now, you can 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>

      Now, you can modify the app.component.ts for preparing data for SpreadJS 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");
        }
      }                     

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

    1. Tag Hierarchy
    2. Sheet Element
    3. Worksheet Element
    4. Column Element