Skip to content

1019524: Updated the getting started for angular #2686

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gopinathan-sf4977 wants to merge 2 commits into
base: development
Choose a base branch
from
Open

1019524: Updated the getting started for angular #2686

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c4f2a81
1019524: Updated the UG getting started for angular
gopinathan-sf4977 Apr 24, 2026
c21f400
Merge branch 'development' into EJ2-1019524-ug
gopinathan-sf4977 Apr 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
149 changes: 38 additions & 111 deletions Document-Processing/Excel/Spreadsheet/Angular/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,103 +3,43 @@ layout: post
title: Getting started with Angular Spreadsheet component | Syncfusion
description: Checkout and learn here all about getting started with Syncfusion Essential Angular Spreadsheet component, it's elements, and more details.
platform: document-processing
control: Getting started
control: Getting started
documentation: ug
---

# Getting started with Angular Spreadsheet component
# Getting Started with Angular Spreadsheet component

This section explains the steps to create a simple Spreadsheet component with basic features in an Angular environment.

To get start quickly with Angular Spreadsheet using CLI, you can check on this video:

{% youtube "https://www.youtube.com/watch?v=2Ozwe37X-7Q" %}
This section explains how to create a simple Angular application and add the [Syncfusion Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) component with the minimum required setup.

## Prerequisites

Ensure your development environment meets the [`System Requirements for Syncfusion® Angular Spreadsheet component`](https://help.syncfusion.com/document-processing/system-requirements).

## Dependencies

The following list of dependencies are required to use the Spreadsheet component in your application.

```js
|-- @syncfusion/ej2-angular-spreadsheet
|-- @syncfusion/ej2-angular-base
|-- @syncfusion/ej2-spreadsheet
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-dropdowns
|-- @syncfusion/ej2-navigations
|-- @syncfusion/ej2-grids
```

## Setup Angular Environment

You can use [`Angular CLI`](https://github.com/angular/angular-cli) to setup your Angular applications. To install Angular CLI use the following command.

```bash
npm install -g @angular/cli
```
[System requirements for Syncfusion® Angular components](https://ej2.syncfusion.com/angular/documentation/system-requirement)

## Create an Angular Application
Use the [`Angular CLI`](https://angular.dev/installation) to create a new Angular application. It is the official and easiest way to get started with Angular.

Start a new Angular application using below Angular CLI command.
To create a new Angular application, run the following commands.

```bash
ng new my-app
```

This command prompts you to configure settings such as whether to include Angular routing and which stylesheet format to use.

```bash

? Which stylesheet format would you like to use? (Use arrow keys)
> CSS [ https://developer.mozilla.org/docs/Web/CSS ]
Sass (SCSS) [ https://sass-lang.com/documentation/syntax#scss ]
Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
Less [ http://lesscss.org ]

npm install -g @angular/cli
ng new spreadsheet-app
cd spreadsheet-app
```

By default, it will create a CSS-based application.

During project setup, when prompted for the Server-side rendering (SSR) option, choose the appropriate configuration.

![Spreadsheet showing a comment](./images/gettingstarted_SSR.png)

Select the required AI tool or ‘none’ if you do not need any AI tool.
## Install the Syncfusion® Angular Spreadsheet package

![Spreadsheet showing a comment](./images/gettingstarted_AI.png)
Currently, Syncfusion® provides two types of package structures for Angular components,
1. Ivy library distribution package [format](https://v17.angular.io/guide/angular-package-format#angular-package-format):

Navigate to the created application folder:
Install the [Angular](https://www.npmjs.com/package/@syncfusion/ej2-angular-spreadsheet) package from npm using the following command:

```bash
cd my-app
```

## Installing Syncfusion<sup style="font-size:70%">&reg;</sup> Spreadsheet package

Syncfusion<sup style="font-size:70%">&reg;</sup> packages are distributed in npm as `@syncfusion` scoped packages. You can get all the Angular Syncfusion<sup style="font-size:70%">&reg;</sup> package from npm [link](https://www.npmjs.com/search?q=%40syncfusion%2Fej2-angular-).

Currently, Syncfusion<sup style="font-size:70%">&reg;</sup> provides two types of package structures for Angular components,
1. Ivy library distribution package [format](https://v17.angular.io/guide/angular-package-format#angular-package-format)
2. Angular compatibility compiler(Angular’s legacy compilation and rendering pipeline) package.

### Ivy library distribution package

Syncfusion<sup style="font-size:70%">&reg;</sup> Angular packages(`>=20.2.36`) has been moved to the Ivy distribution to support the Angular [Ivy](https://docs.angular.lat/guide/ivy) rendering engine and the package are compatible with Angular version 12 and above. To download the package use the below command.

Add [`@syncfusion/ej2-angular-spreadsheet`](https://www.npmjs.com/package/@syncfusion/ej2-angular-spreadsheet/v/20.2.38) package to the application.

```bash
npm install @syncfusion/ej2-angular-spreadsheet --save
```

### Angular compatibility compiled package(ngcc)

For Angular version below 12, you can use the legacy (ngcc) package of the Syncfusion<sup style="font-size:70%">&reg;</sup> Angular components. To download the `ngcc` package use the below.
2. Angular compatibility compiler(Angular’s legacy compilation and rendering pipeline) package.

Add [`@syncfusion/ej2-angular-spreadsheet@ngcc`](https://www.npmjs.com/package/@syncfusion/ej2-angular-spreadsheet/v/20.2.38-ngcc) package to the application.
For Angular version below 12, you can use the legacy (ngcc) package of the Syncfusion® [Angular Spreadsheet](https://www.npmjs.com/package/@syncfusion/ej2-angular-spreadsheet/v/33.2.3-ngcc). To download the `ngcc` package use the below.

```bash
npm install @syncfusion/ej2-angular-spreadsheet@ngcc --save
Expand All @@ -108,21 +48,14 @@ npm install @syncfusion/ej2-angular-spreadsheet@ngcc --save
To mention the ngcc package in the `package.json` file, add the suffix `-ngcc` with the package version as below.

```bash
@syncfusion/ej2-angular-spreadsheet:"20.2.38-ngcc"
@syncfusion/ej2-angular-spreadsheet:"33.2.3-ngcc"
```

The above command does the following configuration to your Angular app,

* Adds `@syncfusion/ej2-angular-spreadsheet` package and its peer dependencies to your `package.json` file.
* Imports the `SpreadsheetAllModule` in your application module `app.module.ts`.
* Registers the Syncfusion<sup style="font-size:70%">&reg;</sup> UI default theme (material) in the `angular.json` file.

>Note: If the ngcc tag is not specified while installing the package, the Ivy Library Package will be installed and this package will throw a warning.

## Adding CSS reference
## Add CSS reference

The following CSS files are available in `../node_modules/@syncfusion` package folder.
This can be referenced in `[src/styles.css]` using following code.
Add the following style references to the `[src/styles.css]` file.

```css
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
Expand All @@ -137,25 +70,21 @@ This can be referenced in `[src/styles.css]` using following code.
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
```

## Add Spreadsheet component
## Add the Syncfusion® Angular Spreadsheet component to the application

Modify the template in [src/app/app.ts] file to render the spreadsheet component. Add the Angular Spreadsheet by using `<ejs-spreadsheet>` selector in template section of the `app.ts` file.

```typescript
import { Component } from '@angular/core';
import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet'
{% tabs %}
{% highlight ts tabtitle="app.ts" %}
{% include code-snippet/spreadsheet/angular/spreadsheet-cs1/src/app.ts %}
{% endhighlight %}

@Component({
imports: [
SpreadsheetAllModule
],
selector: 'app-root',
// specifies the template string for the Spreadsheet component
template: `<ejs-spreadsheet> </ejs-spreadsheet>`
})
export class AppComponent { }
{% highlight ts tabtitle="main.ts" %}
{% include code-snippet/spreadsheet/angular/spreadsheet-cs1/src/main.ts %}
{% endhighlight %}
{% endtabs %}

```
> **Note:** The [`openUrl`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#openurl) and [`saveUrl`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#saveurl) endpoints used in this example are provided only for demonstration purposes. For development and production use, we strongly recommend configuring your own local or hosted web service for the Open and Save actions instead of relying on the online demo service. For more information, refer to the [`Blog Post`](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services).

## Run the application

Expand All @@ -166,22 +95,20 @@ ng serve
```

The following example shows a basic Spreadsheet component

{% tabs %}
{% highlight ts tabtitle="app.ts" %}
{% include code-snippet/spreadsheet/angular/spreadsheet-cs1/src/app.ts %}
{% endhighlight %}

{% highlight ts tabtitle="main.ts" %}
{% include code-snippet/spreadsheet/angular/spreadsheet-cs1/src/main.ts %}
{% endhighlight %}
{% endtabs %}


{% previewsample "/document-processing/samples/spreadsheet/angular/spreadsheet-cs1" %}

> You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/angular/#/bootstrap5/spreadsheet/default) that shows you how present and manipulate data, including editing, formulas, formatting, importing, and exporting.

## Video tutorial

To get start quickly with Angular Spreadsheet using CLI, you can check on this video:

{% youtube "https://www.youtube.com/watch?v=2Ozwe37X-7Q" %}

## See Also

* [Data Binding](./data-binding)
* [Open and Save](./open-save)
* [Open and Save](./open-save)
* [Save Excel files](./save-excel-files)
* [Web Services](./web-services/webservice-overview)
2 changes: 1 addition & 1 deletion Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-cs1/src/app.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ imports: [

standalone: true,
selector: 'app-root',
template: '<ejs-spreadsheet > </ejs-spreadsheet>'
template: '<ejs-spreadsheet (beforeOpen)='beforeOpen($event)' openUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open' allowOpen='true' (beforeSave)='beforeSave($event)' saveUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save' allowSave='true'> </ejs-spreadsheet>'
})
export class AppComponent { }

Expand Down