SpreadJS 14
SpreadJS Designer Component / JavaScript Frameworks / Angular
In This Topic
    Angular
    In This Topic

    You can perform the following steps to add SpreadJS Designer Component in an Angular application:

    1. Create an Angular project by typing the following commands in Command Prompt.
      Command Prompt
      Copy Code
      npm install -g @angular/cli
      ng new designercomponent
      cd designercomponent
      npm start
      

    2. Import the following SpreadJS modules in project to use SpreadJS Designer Component.
      Command Prompt
      Copy Code
      npm install @grapecity/spread-excelio
      npm install @grapecity/spread-sheets
      npm install @grapecity/spread-sheets-barcode
      npm install @grapecity/spread-sheets-charts
      npm install @grapecity/spread-sheets-languagepackages
      npm install @grapecity/spread-sheets-pdf
      npm install @grapecity/spread-sheets-print
      npm install @grapecity/spread-sheets-shapes
      npm install @grapecity/spread-sheets-pivot-addon
      npm install @grapecity/spread-sheets-designer
      npm install @grapecity/spread-sheets-designer-resources-en
      npm install @grapecity/spread-sheets-angular
      npm install @grapecity/spread-sheets-designer-angular
      

    3. Import the designer and resources module in app.module.ts file using the following code snippet.
      app.module.ts
      Copy Code
      import { BrowserModule } from '@angular/platform-browser';
      import { NgModule } from '@angular/core';
      import { AppComponent } from './app.component';
      import '@grapecity/spread-sheets-designer-resources-en';
      import { DesignerModule } from '@grapecity/spread-sheets-designer-angular';
      @NgModule({
          declarations: [
             AppComponent
          ],
          imports: [
             BrowserModule,
             DesignerModule
          ],
          providers: [],
          bootstrap: [AppComponent]
      })
      export class AppModule { }
      

    4. Import CSS file in app.component.css file using the following code snippet.
      app.component.css
      Copy Code
      @import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css';
      @import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
      

    5. Add designer tag in the app.component.html file using the following code snippet.
      app.component.html
      Copy Code
      <designer [props]="props"></designer>
      

    6. To configure the designer, you may pass the props parameters as shown below in app.component.ts file.
      app.component.ts
      Copy Code
      import { Component, ViewEncapsulation } from '@angular/core';
      import * as GC from '@grapecity/spread-sheets';
      import '@grapecity/spread-sheets-designer-resources-en';
      import * as GcDesigner from '@grapecity/spread-sheets-designer';
      @Component({
          selector: 'app-root',
          templateUrl: './app.component.html',
          styleUrls: ['./app.component.css'],
          encapsulation: ViewEncapsulation.None
      })
      export class AppComponent {
          designer: any;
          spread: any;
          props = {
             styleInfo: 'width: 100%; height: 900px',
          };
      }
      

    7. Save and run the application.
      Command Prompt
      Copy Code
      npm start
      

    Access SpreadJS instance

    You can also access the SpreadJS instance by using designerInitialized event. Follow steps 1 to 4 as listed above and continue:

    1. Add an event listener to the designer initialized event in the app.component.html file using the following code snippet.
      app.component.html
      Copy Code
      <designer (designerInitialized)="afterDesignerInit($event)" [props]="props"></designer>
      

    2. Update the app.component.ts file using the following code snippet.
      app.component.ts
      Copy Code
      export class AppComponent {
          props = {
             styleInfo: "width: 100%; height: 900px",
             config: null
          }
          afterDesignerInit(e: any) {
             //this is hosted spread instance
             var workbook = e.designer.getWorkbook();
             var sheet = workbook.getActiveSheet();
             sheet.setValue(1, 1, 'Test');
          }
      }
      

    3. Save and run the application.
      Command Prompt
      Copy Code
      npm start
      

    Apply License

    The licensed version allows you to use all the features of SpreadJS Designer Component. You need to set the license key for SpreadJS, ExcelIO, and the Designer Component which can be done by using the following code snippet.

    JavaScript
    Copy Code
    import '@grapecity/spread-sheets-designer-resources-en';
    import * as GC from '@grapecity/spread-sheets';
    import '@grapecity/spread-sheets-designer';
    import * as ExcelIO from '@grapecity/spread-excelio';
     
    var sjsLicense = "sjs-distribution-key";
    GC.Spread.Sheets.LicenseKey = sjsLicense;
    (ExcelIO as any).LicenseKey = sjsLicense;
     
    (GC.Spread.Sheets as any).Designer.LicenseKey = "designer-component-distribution-key”;