npm package: @groupdocs/groupdocs.editor.angular.ui-spreadsheet
Description: Angular Spreadsheet document editor's core component of the GroupDocs.Editor.UI library.
Latest version: 0.0.6

# GroupDocs.Editor.UI Angular Spreadsheet Document Editor

The **GroupDocs.Editor.UI Angular Spreadsheet Document Editor** is a powerful front-end component of the
GroupDocs.Editor.UI library, tailored specifically for Angular applications. This component empowers developers to
seamlessly integrate a comprehensive document editing solution into their web applications, allowing users to open,
view, edit, and save Spreadsheet documents in various formats, including XLS, XLSX,
XLSX [and more](https://docs.groupdocs.com/editor/net/supported-document-formats/#spreadsheet-family-formats), all
within the
convenience of their web browser. In this article, we'll walk you through the process of getting started with this
essential tool.

## Getting Started

### Installation

To use the editor in your Angular projects, first install the `groupdocs.editor.angular.ui-core`
and `groupdocs.editor.angular.ui-spreadsheet` packages with the `npm` or `yarn` package managers:
Using npm:

```bash
npm i @groupdocs/groupdocs.editor.angular.ui-core
npm i @groupdocs/groupdocs.editor.angular.ui-email
```

Or, with yarn:

```bash
yarn add @groupdocs/groupdocs.editor.angular.ui-core
yarn add @groupdocs/groupdocs.editor.angular.ui-email
```

### Integrating into Your Angular Application

Once the package is installed, you need to integrate it into your Angular application. Here are the necessary steps:

#### 1. Modify the `tailwind.config.js` file

In your Angular project, add the following content paths to your `tailwind.config.js` file:

```javascript
content: [
    "./src/**/*.{html,ts}",
    "node_modules/@groupdocs/groupdocs.editor.angular.ui-core/**/**/*.mjs",
    "node_modules/@groupdocs/groupdocs.editor.angular.ui-spreadsheet/**/**/*.mjs",
]
```

This step is crucial to ensure that the Spreadsheet Document Editor operates correctly.

#### 2. Add `SpreadsheetEditorModule` to `AppModule`

In your Angular `AppModule`, make sure to import and add the `SpreadsheetEditorModule` as follows:

```javascript
SpreadsheetEditorModule.forRoot({rootUrl: environment.apiUrl})
```

This configuration connects the Spreadsheet Document Editor to your application and provides the necessary settings.

#### 3. Configure the Router

Include a route in your Angular router to navigate to the Spreadsheet. This step is crucial for enabling
document editing.

```javascript
{
    path: 'spreadsheet/:folderName/:page/:pages', component
:
    SpreadsheetComponent
}
```

## Using the Spreadsheet Document Editor

Now that you've configured the component, you can start using it to edit Word documents. Here's a brief example of how
to upload a file and navigate to the SpreadsheetComponent:

```javascript
upload()
{
    if (this.file) {
        const observer = {
            next: (data: SpreadsheetStorageInfo) => {
                if (data) {
                    this.documentCode = data.documentCode;
                    this.showLoading = false;
                    this.allowAccept = true;
                }
            },
            error: (error: any) => {
                console.error(error)
            },
        };
        this.spreadsheetHttpService.uploadPost$Json({
            body: {
                File: this.file,
                "LoadOptions.Password": ''
            }
        }).subscribe(observer);
    } else {
        alert("Please select a file first");
    }
}
goToLink()
:
void {
    let url = `spreadsheet/${this.documentCode}/${this.currentPage}/${this.totalPages}`;
    window.open(url, '_blank');
}
```

The code above demonstrates how to upload a file and handle the document editing process within your Angular
application.
**Note**: The input parameters correspond
to [SpreadsheetLoadOptions](https://reference.groupdocs.com/editor/net/groupdocs.editor.options/spreadsheetloadoptions/)
and [SpreadsheetEditOptions](https://reference.groupdocs.com/editor/net/groupdocs.editor.options/spreadsheeteditoptions/).

## Note

This component is designed to work seamlessly with various GroupDocs examples and solutions, including
the [GroupDocs Editor for .NET Spa with GroupDocs document editor](https://github.com/groupdocs-editor/GroupDocs.Editor-for-.NET-UI/tree/master/samples/GroupDocs.Editor.UI.Spreadsheet.SpaSample).

## Resources

To learn more about GroupDocs and access additional resources, please visit the following links:

- **Website:** [www.groupdocs.com](http://www.groupdocs.com)
- **Product Home:** [GroupDocs.Editor](https://products.groupdocs.com/editor)
- **Download:** [Download GroupDocs.Editor](http://downloads.groupdocs.com/editor)
- **Free Support Forum:** [GroupDocs.Editor Free Support Forum](https://forum.groupdocs.com/c/editor)
- **Paid Support Helpdesk:** [GroupDocs.Editor Paid Support Helpdesk](https://helpdesk.groupdocs.com)
- **Blog:** [GroupDocs.Editor Blog](https://blog.groupdocs.com/category/groupdocs-editor-product-family/)
  With the GroupDocs.Editor.UI Angular Spreadsheet Document Editor, you have a versatile and user-friendly tool at
  your disposal for seamless document editing in your Angular applications. Take advantage of this powerful component to
  enhance the functionality and capabilities of your web-based document processing.