documentation(EJ2-1025145:): Porting works in Angular spreadsheet component

Document-Processing/Excel/Spreadsheet/Angular/getting-started.md

@@ -1,38 +1,20 @@
 ---
 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.
+description:  Checkout and learn about Getting started with Angular Spreadsheet component of Syncfusion Essential JS 2 and more details.
+control: Getting started
 platform: document-processing
-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.
@@ -119,10 +101,9 @@ The above command does the following configuration to your Angular app,
 
 >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 references
 
-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/App.css` file.
 
 ```css
 @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@@ -133,8 +114,8 @@ This can be referenced in `[src/styles.css]` using following code.
 @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-angular-spreadsheet/styles/material.css';
 ```
 
 ## Add Spreadsheet component
@@ -181,6 +162,12 @@ The following example shows a basic Spreadsheet component
 
 > 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 started quickly with Angular Spreadsheet, you can watch this video:
+
+{% youtube "https://www.youtube.com/watch?v=3Cx9AnKAHdY" %}
+
 ## See Also
 
 * [Data Binding](./data-binding)

Document-Processing/Excel/Spreadsheet/Angular/how-to-overview.md

@@ -0,0 +1,22 @@
+---
+layout: post
+title: Overview Section for How‑to Guides in Angular Spreadsheet | Syncfusion
+description: In this section, you can find answers to frequently asked questions and solutions for common scenarios in the Spreadsheet control.
+platform: document-processing
+control: Spreadsheet
+documentation: ug
+---
+
+# Angular Spreadsheet – How-to Guides Overview
+
+Explore practical solutions and tips for working with the Syncfusion Angular Spreadsheet component. The guides below cover a variety of common scenarios, helping you implement, customize, and get the most out of your spreadsheet features.
+
+## How-to Articles
+
+- [How to change active sheet when importing Angular Spreadsheet?](./how-to/change-active-sheet.md)
+- [How to Create a object structure?](./how-to/create-a-object-structure.md)
+- [How to add interactive context menu?](./how-to/identify-the-context-menu-opened.md)
+
+## See Also
+
+- [Getting Started with Angular Spreadsheet](./getting-started)

Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-aws-s3-bucket.md

@@ -0,0 +1,176 @@
+---
+layout: post
+title: Opening excel from AWS S3 in Angular Spreadsheet control | Syncfusion
+description: Learn about how to Open an Excel file from AWS S3 in Angular Spreadsheet control of Syncfusion Essential JS 2 and more details.
+platform: document-processing
+control: Open file from AWS S3
+documentation: ug
+---
+
+# Open file from AWS S3
+
+To load a file from AWS S3 in a Spreadsheet Component, you can follow the steps below
+
+**Step 1:** Create a Simple Spreadsheet Sample in Angular
+
+Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/getting-started) to create a simple Spreadsheet sample in Angular. This will give you a basic setup of the Spreadsheet component.
+
+**Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project
+
+1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project.
+
+2. Open the `SpreadsheetController.cs` file in your web service project.
+
+3. Import the required namespaces at the top of the file:
+
+```csharp
+
+using Amazon;
+using Amazon.Runtime;
+using Amazon.S3;
+using Amazon.S3.Model;
+using Amazon.S3.Transfer;
+
+```
+
+4. Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields.
+
+```csharp
+
+private IConfiguration _configuration;
+public readonly string _accessKey;
+public readonly string _secretKey;
+public readonly string _bucketName;
+
+public SpreadsheetController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
+{
+  _hostingEnvironment = hostingEnvironment;
+  _cache = cache;
+  _configuration = configuration;
+  _accessKey = _configuration.GetValue<string>("AccessKey");
+  _secretKey = _configuration.GetValue<string>("SecretKey");
+  _bucketName = _configuration.GetValue<string>("BucketName");
+}
+
+```
+
+5. Create the `OpenFromS3()` method to open the document from the AWS S3 bucket.
+
+```csharp
+
+[Route("api/[controller]")]
+[ApiController]
+public class SpreadsheetController : ControllerBase
+{
+    [HttpPost]
+    [Route("OpenFromS3")]
+    public async Task<IActionResult> OpenFromS3([FromBody] FileOptions options)
+    {
+        try
+        {
+            //Set AWS region and credentials
+            var region = RegionEndpoint.USEast1;
+            var config = new AmazonS3Config { RegionEndpoint = region };
+            var credentials = new BasicAWSCredentials("your-access-key", "your-secretkey");
+            //Create an S3 client to interact with AWS
+            using (var client = new AmazonS3Client(credentials, config))
+            {
+                using (MemoryStream stream = new MemoryStream())
+                {
+                    //Get the full file name using input from the client
+                    string bucketName = "your-bucket-name";
+                    string fileName = options.FileName + options.Extension;
+                    //Download the file from S3 into memory
+                    var response = await client.GetObjectAsync(new GetObjectRequest
+                    {
+                        BucketName = bucketName,
+                        Key = fileName
+                    });
+                    await response.ResponseStream.CopyToAsync(stream);
+                    stream.Position = 0; // Reset stream position for reading
+                    //Wrap the stream as a FormFile for processing
+                    OpenRequest open = new OpenRequest
+                    {
+                        File = new FormFile(stream, 0, stream.Length, options.FileName, fileName)
+                    };
+                    //Convert Excel file to JSON using Workbook.Open method.
+                    var result = Workbook.Open(open);
+                    //Return the JSON result to the client
+                    return Content(result, "application/json");
+                }
+            }
+        }
+        catch (Exception ex)
+        {
+            // Handle any errors and return a message
+            Console.WriteLine($"Error: {ex.Message}");
+            return Content("Error occurred while processing the file.");
+        }
+    }
+
+    // To receive file details from the client.
+    public class FileOptions
+    {
+        public string FileName { get; set; } = string.Empty;
+        public string Extension { get; set; } = string.Empty;
+    }
+}
+
+```
+
+6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration.
+
+```json
+
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  },
+  "AllowedHosts": "*",
+  "AccessKey": "Your Access Key from AWS S3",
+  "SecretKey": "Your Secret Key from AWS S3",
+  "BucketName": "Your Bucket name from AWS S3"
+}
+
+```
+
+N> Replace **Your Access Key from AWS S3**, **Your Secret Key from AWS S3**, and **Your Bucket name from AWS S3** with your actual AWS access key, secret key and bucket name.
+
+**Step 3:**  Modify the index File in the Spreadsheet sample to make a fetch call to the server to retrieve and load the Excel file from the AWS S3 bucket into the client-side spreadsheet.
+
+```ts
+
+<button class="e-btn" (click)="openFromS3()">Import XLS files from AWS S3 bucket</button>
+
+// Function to open a spreadsheet file from AWS S3 via an API call
+openFromS3() {
+    this.spreadsheetObj.showSpinner();
+    // Make a POST request to the backend API to fetch the file from S3. Replace the URL with your local or hosted endpoint URL.
+    fetch('https://localhost:portNumber/api/spreadsheet/OpenFromS3', {
+        method: 'POST',
+        headers: {
+        'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+        FileName: fileInfo.name, // Name of the file to open
+        Extension: fileInfo.extension, // File extension
+          }),
+    })
+    .then((response) => response.json()) // Parse the response as JSON
+    .then((data) => {
+        this.spreadsheetObj.hideSpinner();
+        // Load the spreadsheet data into the UI.
+        this.spreadsheetObj.openFromJson({ file: data, triggerEvent: true });
+        })
+        .catch((error) => {
+        // Log any errors that occur during the fetch operation
+        window.alert('Error importing file:', error);
+        });
+    };
+
+```
+
+N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example.