Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
22 changes: 11 additions & 11 deletions Document-Processing/Word/Word-Processor/angular/list-format.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
---
layout: post
title: List format in Angular Document editor component | Syncfusion
description: Learn here all about List format in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: List format in Angular DOCX Editor component | Syncfusion
description: Learn here all about List format in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: List format
documentation: ug
domainurl: ##DomainURL##
---

# List format in Angular Document editor component
# List format in Angular Document Editor component

[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) supports both the single-level and multilevel lists. Lists are used to organize data as step-by-step instructions in documents for easy understanding of key points. You can apply list to the paragraph either using supported APIs.
[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) supports both single-level and multilevel lists. Lists are used to organize data as step-by-step instructions in documents for easy understanding of key points. You can apply a list to paragraphs using the supported APIs.

## Create bullet list

Bullets are usually used for unordered lists. To apply bulleted list for selected paragraphs, use the following method of Editor instance.
Bullets are usually used for unordered lists. To apply a bulleted list to selected paragraphs, use the following method of the `Editor` instance.

> applyBullet(bullet, fontFamily);

Expand All @@ -31,13 +31,13 @@ this.documentEditor.editor.applyBullet('\uf0b7', 'Symbol');

## Create numbered list

Numbered lists are usually used for ordered lists. To apply numbered list for selected paragraphs, use the following method of Editor instance.
Numbered lists are usually used for ordered lists. To apply a numbered list to selected paragraphs, use the following method of the `Editor` instance.

> applyNumbering(numberFormat,listLevelPattern)

|Parameter|Type|Description|
|---------|----|-----------|
|numberFormat|string|“%n” representations in numberFormat parameter will be replaced by respective list levels value.%1) will be displayed as “1)”|
|numberFormat|string|The "%n" representations in the `numberFormat` parameter will be replaced by the respective list level's value. "%1)" will be displayed as "1)".|
|listLevelPattern(optional)|string|Default value is 'Arabic'.|

Refer to the following example.
Expand All @@ -48,15 +48,15 @@ this.documentEditor.editor.applyNumbering('%1)', 'UpRoman');

## Clear list

You can also clear the list formatting applied for selected paragraphs. Refer to the following sample code.
You can also clear the list formatting applied to selected paragraphs. Refer to the following sample code.

```typescript
this.documentEditor.editor.clearList();
```

## Working with lists

The following sample demonstrates how to create bullet and numbering lists in document editor.
The following sample demonstrates how to create bulleted and numbered lists in Document Editor.

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
Expand All @@ -72,13 +72,13 @@ The following sample demonstrates how to create bullet and numbering lists in do

## Editing numbered list

Document Editor restarts the numbering or continue numbering for a numbered list. These options are found in the built-in context menu, if the list value is selected. Refer to the following screenshot.
Document Editor restarts the numbering or continues numbering for a numbered list. These options are found in the built-in context menu if the list value is selected. Refer to the following screenshot.

![Image](images/list.png)

## Online Demo

Explore how to apply bullets and numbering in Word documents using the Angular Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/angular/#/tailwind3/document-editor/bullets-numbering).
Explore how to apply bullets and numbering in Word documents using the Angular Document Editor in this [live demo](https://document.syncfusion.com/demos/docx-editor/angular/#/tailwind3/document-editor/bullets-numbering).

## See Also

Expand Down
19 changes: 9 additions & 10 deletions Document-Processing/Word/Word-Processor/angular/notes.md
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
---
layout: post
title: Notes in Angular Document editor component | Syncfusion
description: Learn here all about Notes in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Notes in Angular DOCX Editor component | Syncfusion
description: Learn here all about Notes in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Notes
documentation: ug
domainurl: ##DomainURL##
---

# Notes in Angular Document editor component
# Notes in Angular Document Editor component

[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) Container component provides support for inserting footnotes and endnotes through the in-built toolbar. Refer to the following screenshot.
[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) Container component provides support for inserting footnotes and endnotes through the built-in toolbar. Refer to the following screenshot.

![Insert footnote endnote](images/note-toolbar.jpg)

The Footnotes and endnotes are both ways of adding extra bits of information to your writing outside of the main text. You can use footnotes and endnotes to add side comments to your work or to place other publications like books, articles, or websites.
Footnotes and endnotes are both ways of adding extra bits of information to your writing outside of the main text. You can use footnotes and endnotes to add side comments to your work or to cite other publications like books, articles, or websites.

## Insert footnotes

Document Editor exposes an API to insert footnotes at cursor position programmatically or can be inserted to the end of selected text.
Document Editor exposes an API to insert footnotes at the cursor position programmatically, or they can be inserted at the end of selected text.

```typescript
import { NgModule } from '@angular/core';
Expand Down Expand Up @@ -60,7 +60,7 @@ export class AppComponent {

## Insert endnotes

Document Editor exposes an API to insert endnotes at cursor position programmatically or can be inserted to the end of selected text.
Document Editor exposes an API to insert endnotes at the cursor position programmatically, or they can be inserted at the end of selected text.

```typescript
import { NgModule } from '@angular/core';
Expand Down Expand Up @@ -102,11 +102,10 @@ export class AppComponent {

## Update or edit footnotes and endnotes

You can update or edit the footnotes and endnotes using the built-in context menu shown up by right-clicking it.
the footnote endnote dialog box popup and you can customize the number format and start at. Refer to the following screenshot.
You can update or edit the footnotes and endnotes using the built-in context menu shown by right-clicking the footnote or endnote. The Footnote/Endnote dialog box pops up, and you can customize the number format and the starting value. Refer to the following screenshot.

![Update or edit footnotes and endnotes](images/notes-option.jpg)

## Online Demo

Explore how to add and manage notes in Word documents using the Angular Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/angular/#/tailwind3/document-editor/notes).
Explore how to add and manage notes in Word documents using the Angular Document Editor in this [live demo](https://document.syncfusion.com/demos/docx-editor/angular/#/tailwind3/document-editor/notes).
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
---
layout: post
title: Open document from AWS S3 in Angular Document editor | Syncfusion
description: Learn about how to Open document from AWS S3 in Angular Document editor control of Syncfusion Essential JS 2 and more details.
title: Open document from AWS S3 in Angular DOCX Editor | Syncfusion
description: Learn about how to Open document from AWS S3 in Angular Document Editor control of Syncfusion Essential JS 2 and more details.
platform: document-processing
control: Open document from AWS S3
documentation: ug
domainurl: ##DomainURL##
---

# Open document from AWS S3 in Angular Document editor
# Open document from AWS S3 in Angular Document Editor

To load a document from AWS S3 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 AWS S3 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.

**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.
1. 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.

* Open the `DocumentEditorController.cs` file in your web service project.
2. Open the `DocumentEditorController.cs` file in your web service project.

* Import the required namespaces at the top of the file:
3. Import the required namespaces at the top of the file:

```csharp
using System.IO;
Expand All @@ -31,7 +31,7 @@ using Amazon.S3;
using Amazon.S3.Model;
```

* 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
4. 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 @@ -50,7 +50,7 @@ public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryC
}
```

* Create the `LoadFromS3()` method to load the document from AWS S3.
5. Create the `LoadFromS3()` method to load the document from AWS S3.

```csharp

Expand All @@ -64,7 +64,7 @@ public async Task<string> LoadFromS3([FromBody] Dictionary<string, string> jsonO
{
MemoryStream stream = new MemoryStream();

if (jsonObject == null && !jsonObject.ContainsKey("documentName"))
if (jsonObject == null || !jsonObject.ContainsKey("documentName"))
{
return null;
}
Expand All @@ -89,7 +89,7 @@ public async Task<string> LoadFromS3([FromBody] Dictionary<string, string> jsonO
}
```

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

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

> 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
> 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 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
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
---
layout: post
title: Open document from Azure Blob in Angular Document editor | Syncfusion
description: Learn about how to Open document from Azure Blob Storage in Angular Document editor control of Syncfusion Essential JS 2 and more details.
title: Open document from Azure Blob in Angular DOCX Editor | Syncfusion
description: Learn about how to Open document from Azure Blob Storage in Angular Document Editor control of Syncfusion Essential JS 2 and more details.
platform: document-processing
control: Open document from Azure Blob Storage
documentation: ug
domainurl: ##DomainURL##
---

# Open document from Azure Blob Storage in Angular Document editor
# Open document from Azure Blob Storage in Angular Document Editor

To load document from Azure Blob 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 Azure Blob 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 Azure.Storage.Blobs;
using Azure.Storage.Blobs.Specialized;
```

* 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
Expand All @@ -46,20 +46,20 @@ public DocumentEditorController(IConfiguration configuration, ILogger<DocumentEd
}
```

* Modify the `LoadFromAzure()` method to load the document from Azure Blob Storage
* Create the `LoadFromAzure()` method to load the document from Azure Blob Storage.

```csharp

[HttpPost("LoadFromAzure")]
[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
[Route("[controller]/LoadFromAzure")]
//Post action for Loading the PDF documents 
//Post action for Loading the Word documents 

public IActionResult LoadFromAzure([FromBody] Dictionary<string, string> jsonObject)
{
MemoryStream stream = new MemoryStream();

if (jsonObject == null && !jsonObject.ContainsKey("documentName"))
if (jsonObject == null || !jsonObject.ContainsKey("documentName"))
{
return null;
}
Expand All @@ -76,7 +76,7 @@ public IActionResult LoadFromAzure([FromBody] Dictionary<string, string> jsonObj
}
```

* 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 @@ -92,11 +92,11 @@ public IActionResult LoadFromAzure([FromBody] Dictionary<string, string> jsonObj
}
```

> Replace **Your Connection string from Azure** with the actual connection string for your Azure Blob Storage account and **Your container name in Azure** with the actual container name
N> Replace **Your Connection string from Azure** with the actual connection string for your Azure Blob Storage account and **Your container name in Azure** with the actual container name.

**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
Loading