Getting Started with SpreadJS Angular Component

Unlock the potential this JavaScript spreadsheet component adds to your Angular applications.

Steps

  1. Create an Angular application - For creating a new Angular application use Angular CLI. Run the following command from the command prompt or terminal to create an Angular application with default options. For details, see options on the Angular site.
    ng new sjs-angular-app --defaults
    cd sjs-angular-app
  2. Install SpreadJS npm packages - We distribute the Angular SpreadJS Component via @mescius/spread-sheets-angular npm package. The main @mescius/spread-sheets package provides the core functionality. To install the latest version of these packages, run the following command from the application's root folder.
    npm install @mescius/spread-sheets-angular @mescius/spread-sheets
    //or if you are using yarn
    yarn add @mescius/spread-sheets-angular @mescius/spread-sheets
    
  3. Add SpreadJS Angular Component to the application/ Initialize the SpreadSheet - Open src\app\app.component.ts and replace its content with the following code.
    import { Component } from '@angular/core';
    import * as GC from "@mescius/spread-sheets";
    import { SpreadSheetsModule } from "@mescius/spread-sheets-angular";
    
    @Component({
      selector: 'app-root',
      standalone: true,
      imports: [SpreadSheetsModule],
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'sjs-angular-app';
      spread!: GC.Spread.Sheets.Workbook;
      hostStyle = {
        width: '100%',
        height: '500px'
      };
    
      //Initialization
      workbookInit($event: any) {
        //initialize the spread
        this.spread = $event.spread;
      }
    }
  4. Add SpreadJS Angular Template to the application - Open src\app\app.component.html and replace its content with the following code.
    <gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="workbookInit($event)">
    </gc-spread-sheets>
  5. Add SpreadJS CSS to the angular application - Open the angular.json and add SpreadJS CSS to the global styles node.
    "styles": [
        "src/styles.css",
        "node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
    ]

Setting Values and Formulas

Steps

  1. Use the setValue method to set the value of the cell and setFormula to make your calculations .
    workbookInit($event: any) {
      //initialize the spread
      this.spread = $event.spread;
      let spread = this.spread;
      let sheet = spread.getActiveSheet();
      //Setting Values - Text
      sheet.setValue(1, 1, "Setting Values");
      //Setting Values - Number 
      sheet.setValue(2, 1, "Number");
      sheet.setValue(2, 2, 23)
      sheet.setValue(3, 1, "Text");
      sheet.setValue(3, 2, "SpreadJS")
      sheet.setValue(4, 1, "Datetime");
      //Setting Values - DateTime
      sheet.getCell(4, 2).value(new Date(2020, 10, 7)).formatter("mm-dd-yyyy");
    }

Setting Style

Give your data a more valuable and appealing look by using the functions below.

Steps

  1. In this step, set the style for the sheet to make it more attractive and engaging.

    workbookInit($event: any) {
      //initialize the spread
      this.spread = $event.spread;
      let spread = this.spread;
      let sheet = spread.getActiveSheet();
      //Setting Values - Text
      sheet.setValue(1, 1, "Setting Values");
      //Setting Values - Number 
      sheet.setValue(2, 1, "Number");
      sheet.setValue(2, 2, 23)
      sheet.setValue(3, 1, "Text");
      sheet.setValue(3, 2, "SpreadJS")
      sheet.setValue(4, 1, "Datetime");
      //Setting Values - DateTime
      sheet.getCell(4, 2).value(new Date(2020, 10, 7)).formatter("mm-dd-yyyy");
      //Setting style
      sheet.setColumnWidth(1, 200);
      sheet.setColumnWidth(2, 200);
      sheet.getRange(1, 1, 1, 2).backColor("rgb(130, 188, 0)").foreColor("rgb(255, 255, 255)");
      sheet.getRange(3, 1, 1, 2).backColor("rgb(211, 211, 211)");
      sheet.addSpan(1, 1, 1, 2);
      sheet.getRange(1, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {
        all: true
      });
      sheet.getRange(1, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.dotted), {
        inside: true
      });
      sheet.getRange(1, 1, 1, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
    }

Binding Data

Discover how you can bind your data with effortless efficiency.

Steps

  1. Use the getSheet method to get the sheet you are working with. Set the cell binding source with "new GC.Spread.Sheets.Bindings.CellBindingSource(person);". Then use the setBindingPath method to set the binding path for the specified cell in the specified sheet area. Then set the data source for the sheet using the setDataSource method.
    workbookInit($event: any) {
      //initialize the spread
      this.spread = $event.spread;
      let sheet = this.spread.getActiveSheet();
      var person = { name: 'Peter Winston', age: 25, gender: 'Male', address: { postcode: '10001' } };
      var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person);
      sheet.setBindingPath(2, 2, 'name');
      sheet.setBindingPath(3, 2, 'age');
      sheet.setBindingPath(4, 2, 'gender');
      sheet.setBindingPath(5, 2, 'address.postcode');
      sheet.setDataSource(source);
    }