Create an Angular Spreadsheet

SpreadJS is an extremely powerful spreadsheet component, allowing you to easily add complete spreadsheet capabilities to your applications such as importing and exporting native Excel .xlsx files. SpreadJS is framework agnostic, making it easy to use SpreadJS within several JavaScript frameworks including Angular!

We have created a tutorial that breaks down how to use SpreadJS to create an Excel Spreadsheet in Angular.

Project Set-Up

We first will need to set-up an Angular project to add to the Excel Spreadsheet. For this tutorial, we will be using an Angular 10 project.

1. Create new Angular 10 project: ng new project-name. For this example, I name my project spreadJS-angular:
   

   ng new spreadJS-angular

2. Now we will change the directory to our new project:

   cd spreadJS-angular 
   

3. Run your project:

   ng serve –open 
   

Notice the Angular 10 welcome page is now being served to: http://localhost:4200/

Add SpreadJS to an Angular Project:

Now that we have an Angular 10 project up and running, we are going to remove its welcome page contents and add SpreadJS to the project, thus creating the Angular Spreadsheet.

1. Install SpreadJS using the npm package:

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

2. Configure SpreadJS's 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](mailto:node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016darkGray.css)"  
            ],  
            ...  
          }  
          ...  
        }  
        ...  
      }  
      ...  
    }  
  }  
  ...  
}

3. Now we will use SpreadJS in our application. We will modify the module.ts for importing the SpreadJS module.

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

4. Modify the component.html for viewing the SpreadJS component:

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

5. Modify the component.ts to prepare the data for the SpreadJS component:

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. Run ng serve -open

Navigate to http://localhost:4200/ in your browser, and you will now see the SpreadJS component with a list of items:

Note: If you are observing this error:

This can be fixed by copying the Angular Wrapper TypeScript source file into the project and then referring it as file module.

Here are the steps to follow:

1. npm install
2. Copy the spread.sheets.angular.ts (only this file) from the _nodemodules/@grapecity/spread-sheets-angular folder to the src/component/spread-sheets-angular folder
3. Modify the module.ts:

// import { SpreadSheetsModule } from "@grapecity/spread-sheets-angular";

import { SpreadSheetsModule } from "../component/spread-sheets-angular/gc.spread.sheets.angular";

Notice the error is no longer observable!

Navigate here to learn more about SpreadJS, and its support for the Angular framework. If you have any questions, GrapeCity’s Technical Engagement team is here to help.