Skip to content

1043288: Update UG Documentation in React #3914

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
Seenivasa621 wants to merge 3 commits into
base: development
Choose a base branch
from
Open

1043288: Update UG Documentation in React #3914

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2fa48cd
1041390: Updated the Angular .md Files
Jul 27, 2026
e148d31
1041390: updated the code for CI issue
Jul 28, 2026
a44df1f
Merge branch 'development' into 1041390-Doc_Angular-3
Seenivasa621 Jul 28, 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
32 changes: 16 additions & 16 deletions ...ing/Word/Word-Processor/angular/opening-documents/dropbox-cloud-file-storage.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Open Dropbox Files in Angular Document Editor | Syncfusion
description: Learn about how to Open document from Dropbox cloud file storage in Angular Document editor control of Syncfusion Essential JS 2 and more details.
title: Open Dropbox Files in Angular DOCX Editor | Syncfusion
description: Learn about how to Open document from Dropbox cloud file storage in Angular Document Editor control of Syncfusion Essential JS 2 and more details.
platform: document-processing
control: Open document from Dropbox cloud file storage
documentation: ug
Expand All @@ -10,17 +10,17 @@ domainurl: ##DomainURL##

# Open document from Dropbox cloud file storage

To load a document from Dropbox cloud file storage in a [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor), you can follow the steps below
To load a document from Dropbox cloud file storage in a [Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor), you can follow the steps below.

**Step 1:** Create a Dropbox API
**Step 1:** Create a Dropbox API app

To create a Dropbox API App, you should follow the official documentation provided by Dropbox [link](https://www.dropbox.com/developers/documentation/dotnet#tutorial). The process involves visiting the Dropbox Developer website and using their App Console to set up your API app. This app will allow you to interact with Dropbox programmatically, enabling secure access to files and data.
To create a Dropbox API app, you can follow the official Dropbox documentation [link](https://www.dropbox.com/developers/documentation/dotnet#tutorial). The process involves visiting the Dropbox Developer website and using their App Console to set up your API app. This app will allow you to interact with Dropbox programmatically, enabling secure access to files and data.

**Step 2:** Create a Simple Document Editor Sample in angular
**Step 2:** Create a simple Document Editor sample in Angular

Start by following the steps provided in this [link](../getting-started) to create a simple Document Editor sample in angular. This will give you a basic setup of the Document Editor component.
Start by following the steps provided in this [link](../getting-started) to create a simple Document Editor sample in Angular. This will give you a basic setup of the Document Editor component.

**Step 3:** Modify the `DocumentEditorController.cs` File in the Web Service Project
**Step 3:** Modify the `DocumentEditorController.cs` file in the web service project

* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../web-services-overview) for instructions on how to create a web service project.

Expand All @@ -34,7 +34,7 @@ using Dropbox.Api;
using Dropbox.Api.Files;
```

* Add the following private fields and constructor parameters to the `DocumentEditorController` class, In the constructor, assign the values from the configuration to the corresponding fields
* Add the following private fields and constructor parameters to the `DocumentEditorController` class. In the constructor, assign the values from the configuration to the corresponding fields.

```csharp
private IConfiguration _configuration;
Expand All @@ -58,14 +58,14 @@ public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryC
[AcceptVerbs("Post")]
[HttpPost]
[EnableCors("AllowAllOrigins")]
[Route("LoadFromBoxCloud")]
[Route("LoadFromDropBox")]
//Post action for Loading the documents

public async Task<string> LoadFromDropBox([FromBody] Dictionary<string, string> jsonObject)
{
if (jsonObject == null && !jsonObject.ContainsKey("documentName"))
if (jsonObject == null || !jsonObject.ContainsKey("documentName"))
{
return null
return null;
}
MemoryStream stream = new MemoryStream();

Expand All @@ -85,7 +85,7 @@ public async Task<string> LoadFromDropBox([FromBody] Dictionary<string, string>
}
```

* Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
* Open the `appsettings.json` file in your web service project. Add the following lines below the existing `"AllowedHosts"` configuration.

```json
{
Expand All @@ -101,11 +101,11 @@ public async Task<string> LoadFromDropBox([FromBody] Dictionary<string, string>
}
```

> Replace **Your_Dropbox_Access_Token** with your actual Dropbox access token and **Your_Folder_Name** with your folder name.
N> Replace **Your_Dropbox_Access_Token** with your actual Dropbox access token and **Your_Folder_Name** with your folder name.

**Step 4:** Modify the index File in the Document Editor sample
**Step 4:** Modify the index file in the Document Editor sample

In the client-side, the document is returned from the web service is opening using [`open`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#open) method.
On the client side, the document returned from the web service is opened using the [`open`](https://ej2.syncfusion.com/angular/documentation/api/document-editor#open) method.

```typescript
import { Component, OnInit, ViewChild } from '@angular/core';
Expand Down
28 changes: 14 additions & 14 deletions ...rocessing/Word/Word-Processor/angular/opening-documents/google-cloud-storage.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
---
layout: post
title: Open Google Cloud Files in Angular Document Editor | Syncfusion
description: Learn about how to Open document from Google Cloud Storage in Angular Document editor control of Syncfusion Essential JS 2 and more details.
title: Open Google Cloud Files in Angular DOCX Editor | Syncfusion
description: Learn about how to Open document from Google Cloud Storage in Angular Document Editor control of Syncfusion Essential JS 2 and more details.
platform: document-processing
control: Open document from Google Cloud Storage
documentation: ug
domainurl: ##DomainURL##
---

# Open document from Google Cloud Storage in Angular Document editor
# Open document from Google Cloud Storage in Angular Document Editor

To load a document from Google Cloud Storage in a [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor), you can follow the steps below
To load a document from Google Cloud Storage in a [Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor), you can follow the steps below.

**Step 1:** Create a Simple Document Editor Sample in angular
**Step 1:** Create a simple Document Editor sample in Angular

Start by following the steps provided in this [link](../getting-started) to create a simple Document Editor sample in angular. This will give you a basic setup of the Document Editor component.
Start by following the steps provided in this [link](../getting-started) to create a simple Document Editor sample in Angular. This will give you a basic setup of the Document Editor component.

**Step 2:** Modify the `DocumentEditorController.cs` File in the Web Service Project
**Step 2:** Modify the `DocumentEditorController.cs` file in the web service project

* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../web-services-overview) for instructions on how to create a web service project.

Expand All @@ -30,7 +30,7 @@ using Google.Cloud.Storage.V1;
using Google.Apis.Auth.OAuth2;
```

* Add the following private fields and constructor parameters to the `DocumentEditorController` class, In the constructor, assign the values from the configuration to the corresponding fields
* Add the following private fields and constructor parameters to the `DocumentEditorController` class. In the constructor, assign the values from the configuration to the corresponding fields.

```csharp
// Private readonly object _storageClient
Expand Down Expand Up @@ -71,9 +71,9 @@ public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryC

public async Task<string> LoadFromGoogleCloud([FromBody] Dictionary<string, string> jsonObject)
{
if (jsonObject == null && !jsonObject.ContainsKey("documentName"))
if (jsonObject == null || !jsonObject.ContainsKey("documentName"))
{
return null
return null;
}
MemoryStream stream = new MemoryStream();

Expand All @@ -90,7 +90,7 @@ public async Task<string> LoadFromGoogleCloud([FromBody] Dictionary<string, stri
}
```

* Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
* Open the `appsettings.json` file in your web service project. Add the following lines below the existing `"AllowedHosts"` configuration.

```json
{
Expand All @@ -105,13 +105,13 @@ public async Task<string> LoadFromGoogleCloud([FromBody] Dictionary<string, stri
}
```

> Replace **Your Bucket name from Google Cloud Storage** with the actual name of your Google Cloud Storage bucket
> Replace **Your Bucket name from Google Cloud Storage** with the actual name of your Google Cloud Storage bucket.

> Replace **path/to/service-account-key.json** with the actual file path to your service account key JSON file. Make sure to provide the correct path and filename.

**Step 3:** Modify the index File in the Document Editor sample
**Step 3:** Modify the index file in the Document Editor sample

In the client-side, the document is returned from the web service is opening using [`open`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#open) method.
On the client side, the document returned from the web service is opened using the [`open`](https://ej2.syncfusion.com/angular/documentation/api/document-editor#open) method.

```typescript
import { Component, OnInit, ViewChild } from '@angular/core';
Expand Down
28 changes: 14 additions & 14 deletions Document-Processing/Word/Word-Processor/angular/opening-documents/google-drive.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
---
layout: post
title: Open Google Drive Files in Angular Document Editor | Syncfusion
description: Learn about how to Open document from Google Drive in Angular Document editor control of Syncfusion Essential JS 2 and more details.
title: Open Google Drive Files in Angular DOCX Editor | Syncfusion
description: Learn about how to Open document from Google Drive in Angular Document Editor control of Syncfusion Essential JS 2 and more details.
platform: document-processing
control: Open document from Google Drive
documentation: ug
domainurl: ##DomainURL##
---

# Open document from Google Drive in Angular Document editor
# Open document from Google Drive in Angular Document Editor

To load a document from Google Drive in a [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor), you can follow the steps below
To load a document from Google Drive in a [Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor), you can follow the steps below.

**Step 1:** Set up Google Drive API
**Step 1:** Set up the Google Drive API

You must set up a project in the Google Developers Console and enable the Google Drive API. Obtain the necessary credentials to access the API. For more information, view the official [link](https://developers.google.com/drive/api/guides/enable-sdk).
You must set up a project in the Google Developers Console and enable the Google Drive API. Obtain the necessary credentials to access the API. For more information, refer to the official [link](https://developers.google.com/drive/api/guides/enable-sdk).

**Step 2:** Create a Simple Document Editor Sample in angular
**Step 2:** Create a simple Document Editor sample in Angular

Start by following the steps provided in this [link](../getting-started) to create a simple Document Editor sample in angular. This will give you a basic setup of the Document Editor component.
Start by following the steps provided in this [link](../getting-started) to create a simple Document Editor sample in Angular. This will give you a basic setup of the Document Editor component.

**Step 3:** Modify the `DocumentEditorController.cs` File in the Web Service Project
**Step 3:** Modify the `DocumentEditorController.cs` file in the web service project

* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../web-services-overview) for instructions on how to create a web service project.

Expand All @@ -34,7 +34,7 @@ using Google.Apis.Drive.v3;
using Google.Apis.Util.Store;
```

* Add the following private fields and constructor parameters to the `DocumentEditorController` class, In the constructor, assign the values from the configuration to the corresponding fields
* Add the following private fields and constructor parameters to the `DocumentEditorController` class. In the constructor, assign the values from the configuration to the corresponding fields.

```csharp
private IConfiguration _configuration;
Expand Down Expand Up @@ -113,7 +113,7 @@ public async Task<string> LoadFromGoogleDrive([FromBody] Dictionary<string, stri
}
```

* Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
* Open the `appsettings.json` file in your web service project. Add the following lines below the existing `"AllowedHosts"` configuration.

```json
{
Expand All @@ -130,13 +130,13 @@ public async Task<string> LoadFromGoogleDrive([FromBody] Dictionary<string, stri
}
```

> Replace **Your Google Drive Folder ID**, **Your Application name**, and **Your Path to the OAuth 2.0 Client IDs json file** with your actual Google drive folder ID , Your name for your application and the path for the JSON file.
> Replace **Your Google Drive Folder ID**, **Your Application name**, and **Your Path to the OAuth 2.0 Client IDs json file** with your actual Google Drive folder ID, your name for your application, and the path for the JSON file.

> The **FolderId** part is the unique identifier for the folder. For example, if your folder URL is: `https://drive.google.com/drive/folders/abc123xyz456`, then the folder ID is `abc123xyz456`.

**Step 4:** Modify the index File in the Document Editor sample
**Step 4:** Modify the index file in the Document Editor sample

In the client-side, the document is returned from the web service is opening using [`open`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#open) method.
On the client side, the document returned from the web service is opened using the [`open`](https://ej2.syncfusion.com/angular/documentation/api/document-editor#open) method.

```typescript
import { Component, OnInit, ViewChild } from '@angular/core';
Expand Down
Loading