# Spread-sheets-io Element

A walkthrough of using the spread-sheets-io element of SpreadJS in an Angular web application

## Content

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.

1. **Install the Angular CLI globally**
    Open the **Command Prompt** window and type the following command:

    ```Shell
    npm install -g @angular/cli
    ```
2. **Create a new project using Angular CLI**
    Create a new project using the following command and navigate to the project directory:

    ```Shell
    ng new spread-sheets-angular-cli --style css --ssr false
    cd spread-sheets-angular-cli
    ```
3. **Install SpreadJS NPM package**
    Install the SpreadJS npm package using the following commands:

    ```Shell
    npm install @mescius/spread-sheets
    npm install @mescius/spread-sheets-angular
    ```
4. **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:

    ```Shell
    npm install @mescius/spread-sheets-io
    npm install file-saver --save
    npm install @types/file-saver --save
    ```
5. **Configure SpreadJS CSS**
    Configure the SpreadJS CSS in **styles.css** as shown below:

    ```JSON
    @import "../node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
    ```
6. **Use spread-sheets-io in an Angular application**
    Modify **app.component.html** for viewing the SpreadJS component as shown below:

    ```HTML
    <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:

    ```TypeScript
    import { Component, enableProdMode } from "@angular/core";
    import { bootstrapApplication, BrowserModule } from '@angular/platform-browser';
    import { SpreadSheetsModule } from "@mescius/spread-sheets-angular";
    import GC from "@mescius/spread-sheets";
    import "@mescius/spread-sheets-io";
    import { saveAs } from "file-saver";
    
    @Component({
      selector: "app-root",
      templateUrl: "app.component.html",
      standalone: true,
      imports: [SpreadSheetsModule, BrowserModule],
    })
    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,
          });
        }
      }
    }
    
    enableProdMode();
    bootstrapApplication(AppComponent);
    ```
7. **Build and run the project**
    Build and run the new project using the following command:

    ```Shell
    npm start
    ```