diff --git a/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md b/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md index 3dd6d909de..4a28461474 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md @@ -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® Spreadsheet package - -Syncfusion® packages are distributed in npm as `@syncfusion` scoped packages. You can get all the Angular Syncfusion® package from npm [link](https://www.npmjs.com/search?q=%40syncfusion%2Fej2-angular-). - -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) -2. Angular compatibility compiler(Angular’s legacy compilation and rendering pipeline) package. - -### Ivy library distribution package - -Syncfusion® 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® 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 @@ -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® 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'; @@ -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 `` 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: ` ` -}) -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 @@ -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) \ No newline at end of file +* [Open and Save](./open-save) +* [Save Excel files](./save-excel-files) +* [Web Services](./web-services/webservice-overview) \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-cs1/src/app.ts b/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-cs1/src/app.ts index 8786698d57..2098ee7397 100644 --- a/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-cs1/src/app.ts +++ b/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-cs1/src/app.ts @@ -10,7 +10,7 @@ imports: [ standalone: true, selector: 'app-root', - template: ' ' + template: ' ' }) export class AppComponent { }