# Spread-sheets-io Element

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

## Content

By using the SpreadJS Excel import and export module in Angular, you can render and display worksheets in the browser and also import or export spreadsheet files in Excel, SSJSON, or SJS format.

>type=note
> **Note:** This example uses the Angular standalone application pattern and a browser-only project created with --ssr false.

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 the SpreadJS Excel import and export module in the Angular application.**
    Modify **app.html** for viewing the SpreadJS component as shown below:

    ```HTML
    <div class="excelio-demo">
      <input
        type="file"
        accept=".sjs,.xlsx,.ssjson"
        (change)="onFileSelected($event)"
      />
    
      <label for="exportFileType">File Type:</label>
      <select id="exportFileType" #exportType>
        <option value="xlsx">Excel</option>
        <option value="ssjson">SSJSON</option>
        <option value="sjs">SJS</option>
      </select>
    
      <button type="button" (click)="exportFile(exportType.value)">Export</button>
    
      <gc-spread-sheets
        [hostStyle]="hostStyle"
        (workbookInitialized)="initSpread($event)"
      >
        <gc-worksheet></gc-worksheet>
      </gc-spread-sheets>
    </div>
    ```

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

    ```TypeScript
    import { Component } from '@angular/core';
    import * as GC from '@mescius/spread-sheets';
    import '@mescius/spread-sheets-io';
    import { SpreadSheetsModule } from '@mescius/spread-sheets-angular';
    import { saveAs } from 'file-saver';
    
    @Component({
      selector: 'app-root',
      standalone: true,
      imports: [SpreadSheetsModule],
      templateUrl: './app.html',
      styleUrl: './app.css'
    })
    export class App {
      spread!: GC.Spread.Sheets.Workbook;
      hostStyle = {
        width: '100%',
        height: '600px'
      };
      fileTypeMap = {
        sjs: 'sjs',
        xlsx: 'xlsx',
        ssjson: 'ssjson'
      };
    
      initSpread(args: { spread: GC.Spread.Sheets.Workbook }): void {
        this.spread = args.spread;
        const sheet = this.spread.getActiveSheet();
        sheet.setValue(0, 0, 'Hello World!');
      }
    
      onFileSelected(event: Event): void {
        const input = event.target as HTMLInputElement;
        const file = input.files?.[0];
    
        if (file) {
          this.loadFile(file);
        }
      }
    
      getFileType(fileName: string): string | undefined {
        return fileName.split('.').pop()?.toLowerCase();
      }
    
      loadFile(file: File): void {
        const type = this.getFileType(file.name);
        const fileType =
          type === this.fileTypeMap.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 (
          type === this.fileTypeMap.xlsx ||
          type === this.fileTypeMap.ssjson
        ) {
          this.spread.import(
            file,
            () => console.log('File loaded'),
            console.error,
            { fileType }
          );
        } else {
          console.error('Unsupported file type');
        }
      }
    
      exportFile(type: string): void {
        const normalizedType = type.toLowerCase();
        const fileName = `export.${normalizedType}`;
        const fileType =
          normalizedType === this.fileTypeMap.xlsx
            ? GC.Spread.Sheets.FileType.excel
            : GC.Spread.Sheets.FileType.ssjson;
    
        if (normalizedType === this.fileTypeMap.sjs) {
          this.spread.save((blob: Blob) => saveAs(blob, fileName), console.error);
        } else if (
          normalizedType === this.fileTypeMap.xlsx ||
          normalizedType === this.fileTypeMap.ssjson
        ) {
          this.spread.export(
            (blob: Blob) => saveAs(blob, fileName),
            console.error,
            { fileType }
          );
        }
      }
    }
    ```
7. **Build and run the project**
    Build and run the new project using the following command:

    ```Shell
    npm start
    ```

>type=note
> **Note:** When you install and import the file-saver npm package, you do not need to add an additional FileSaver.js script in index.html.