Spread-sheets-io Element

Using the spread-sheets-io element in SpreadJS with Angular, you can quickly render and display the sheets on the webpages while also executing the import and export operations without any hassle.

Install the Angular CLI globally
Open the Command Prompt window and type the following command:
```
npm install -g @angular/cli
```
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 --style css --ssr false
cd spread-sheets-angular-cli
```
Install SpreadJS NPM package
Install the SpreadJS npm package using the following commands:
```
npm install @mescius/spread-sheets
npm install @mescius/spread-sheets-angular
```
Install spread-sheets-io Angular Module and FileSaver Angular Module in the Project
Install the spread-sheets-io and file-saver modules in your project using the following commands:
```
npm install @mescius/spread-sheets-io
npm install file-saver --save
npm install @types/file-saver --save
```

Configure SpreadJS CSS

Configure the SpreadJS CSS in angular.json as shown below:

{
  ...
  "projects":{
    "spread-sheets-angular-cli":{
      ...
      "architect":{
        ...
        "build":{
          ...
          "options":{
            ...
            "styles": [
              "node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
            ],
            ...
          }
          ...
        }
        ...
      }
      ...
    }
  }
  ...
}

Use spread-sheets-io in an Angular application

Modify app.component.html for viewing the SpreadJS component as shown below:

<div>
  <input id="selectedFile" type="file" accept=".sjs, .xlsx, .ssjson" />
  <label for="exportFileType">File Type:</label>
  <select id="exportFileType">
    <option value="xlsx">Excel</option>
    <option value="ssjson">SSJson</option>
    <option value="sjs">SJS</option>
  </select>
  <button id="exportBtn">Export</button>
  <gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)">
    <gc-worksheet></gc-worksheet> 
</gc-spread-sheets>
</div>

Modify app.component.ts for using spread-sheets-io element and preparing data for SpreadJS component as shown below:

import { Component, NgModule, enableProdMode } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { SpreadSheetsModule } from "@mescius/spread-sheets-angular";
import GC from "@mescius/spread-sheets";
import "@mescius/spread-sheets-io";

declare var saveAs: any;

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  standalone: false,
})

export class AppComponent {
  autoGenerateColumns = false;
  spread!: GC.Spread.Sheets.Workbook;

  hostStyle = {
    width: "100%",
    height: "600px",
  };


  constructor() { }

  fileTypeMap = { sjs: "sjs", xlsx: "xlsx", ssjson: "ssjson" };

  initSpread($event: any) {
    this.spread = $event.spread;
    let spread = this.spread;
    let sheet = spread.getActiveSheet();
    sheet.setValue(0, 0, "Hello World!");

    document.getElementById("selectedFile")!.addEventListener("change", (e) =>
      this.loadFile((e as any).target.files[0])
    );

    document.getElementById("exportBtn")!.addEventListener("click", () => {
      this.exportFile();
    });
  }

  getFileType(fileName: String) {

    // console.log( fileName);
    return fileName.split(".").pop();
  }

  loadFile(file: any) {
    const type = this.getFileType(file.name);
    const fileType =
      type === "xlsx"
        ? GC.Spread.Sheets.FileType.excel
        : GC.Spread.Sheets.FileType.ssjson;

    if (type === this.fileTypeMap.sjs) {
      this.spread.open(
        file,
        () => console.log("SJS File Loaded"),
        console.error
      );
    } else if (
      ([this.fileTypeMap.xlsx, this.fileTypeMap.ssjson] as any).includes(type)
    ) {
      this.spread.import(
        file,
        () => console.log("File Loaded"),
        console.error,
        { fileType }
      );
    } else {
      console.error("Unsupported file type");
    }
  }

  exportFile() {
    const type = (document.getElementById("exportFileType") as any).value;
    const fileName = `export.${type}`;
    const fileType =
      type === "xlsx"
        ? GC.Spread.Sheets.FileType.excel
        : GC.Spread.Sheets.FileType.ssjson;
    if (type === this.fileTypeMap.sjs) {
      this.spread.save((blob: any) => saveAs(blob, fileName), console.error);
    } else if (
      type === this.fileTypeMap.xlsx ||
      type === this.fileTypeMap.ssjson
    ) {
      this.spread.export((blob: any) => saveAs(blob, fileName), console.error, {
        fileType,
      });
    }
  }
}

@NgModule({
  imports: [BrowserModule, SpreadSheetsModule],
  declarations: [AppComponent],
  exports: [],
  bootstrap: [AppComponent],
})

export class AppModule { }
enableProdMode();

// Bootstrap application with hash style navigation and global services.
platformBrowserDynamic().bootstrapModule(AppModule);

Modify index.html file and include the FileSaver script file in the <head> section as shown below.

<script src="https://developer.mescius.com/spreadjs/demos/spread/source/js/FileSaver.js" type="text/javascript"></script>

Build and run the project
Build and run the new project using the following command:
```
npm start
```