diff --git a/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md b/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md index 9616093cae..a8b427aecc 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md @@ -11,6 +11,92 @@ documentation: ug This section explains how to create a simple Angular application and add the [Angular Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) component with the minimum required setup. +{% tabcontents %} + +{% tabcontent Syncfusion CLI %} + +## Prerequisites + +- [Node.js 24+](https://nodejs.org/en) (LTS recommended). +- Syncfusion CLI. + +## Install the Syncfusion CLI + +Install the Syncfusion CLI globally using the following command: + +{% tabs %} +{% highlight bash tabtitle="npm" %} +npm install -g @syncfusion/syncfusion-cli +{% endhighlight %} +{% endtabs %} + +## Create a new Angular application using Syncfusion CLI + +You can create a Angular application using the Syncfusion CLI. The CLI provides two ways to create a project: + +### Non-interactive mode + +Non-interactive mode allows you to create a project directly using a single command with the required command-line arguments. + +{% tabs %} +{% highlight bash tabtitle="CMD" %} +sf new syncfusion-angular-app --framework angular --template spreadsheet-editor +{% endhighlight %} +{% endtabs %} + +In this mode, the project configuration is passed directly in the command. The above command creates a Angular application configured with the Syncfusion® `Spreadsheet Editor` component. + +### Interactive mode + +Interactive mode guides you through the project creation process with step-by-step prompts. + +{% tabs %} +{% highlight bash tabtitle="CMD" %} +sf +{% endhighlight %} +{% endtabs %} + +When you run the `sf` command, the CLI prompts you to select the required project configuration. To create a Angular application with the Syncfusion® `Spreadsheet Editor` component, select the following options: + +{% tabs %} +{% highlight bash tabtitle="CMD" %} + +√ Project name? ... syncfusion-angular-app +√ Choose Framework: » Angular +√ Choose Template: » Spreadsheet Editor +√ Choose Theme: » Material3 +√ Choose Style Format: » CSS +√ Would you like to integrate the Syncfusion MCP Server (AI Assistant) into this project? ... no +√ Would you like to install Syncfusion Component Skills for AI-powered development? ... no +√ Install dependencies and start app now? ... no + +{% endhighlight %} +{% endtabs %} + +The above selections generate a Angular application configured with the Syncfusion® `Spreadsheet Editor` component. You can choose different values for language, theme, style format, MCP setup, and skills installation based on your project requirements. + +The Syncfusion® CLI creates the project with a predefined template. After the project is generated, you can customize or replace the component code based on your application requirements. + +## Run the project + +Once the project is created, navigate to the project directory and run the following commands in your terminal. + +{% tabs %} +{% highlight bash tabtitle="CMD" %} +cd syncfusion-angular-app +npm install +ng serve +{% endhighlight %} +{% endtabs %} + +The output will appear as follows: + +![Spreadsheet Editor Component](images/syncfusion-cli.png) + +{% endtabcontent %} + +{% tabcontent Angular CLI %} + ## Prerequisites [System requirements for Syncfusion® Angular components](https://ej2.syncfusion.com/angular/documentation/system-requirement) @@ -106,6 +192,10 @@ ng serve After the application starts, open the localhost URL shown in the terminal to view the Angular Spreadsheet Editor in the browser. The output will appear as follows: ![Angular Spreadsheet Editor](./images/spreadsheet.png) +{% endtabcontent %} + +{% endtabcontents %} + You can also explore the Spreadsheet interactively using the live sample below. {% previewsample "/document-processing/samples/spreadsheet/angular/spreadsheet-cs1" %} diff --git a/Document-Processing/Excel/Spreadsheet/Angular/images/syncfusion-cli.png b/Document-Processing/Excel/Spreadsheet/Angular/images/syncfusion-cli.png new file mode 100644 index 0000000000..c5b98c5795 Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Angular/images/syncfusion-cli.png differ