Skip to content

1043283: UG Correction for Angular platform #3943

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

1043283: UG Correction for Angular platform #3943

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2769514
1043283: UG Correction for Angular platform
MoushmiDhanislas Jul 28, 2026
5e7a3e4
1043283: Updated the document editor word
MoushmiDhanislas 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
18 changes: 9 additions & 9 deletions Document-Processing/Word/Word-Processor/angular/fields.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
---
layout: post
title: Fields in Angular Document editor component | Syncfusion
description: Learn here all about Fields in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Fields in Angular DOCX Editor component | Syncfusion
description: Learn here all about Fields in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Fields
control: Fields
documentation: ug
domainurl: ##DomainURL##
---

# Fields in Angular Document editor component
# Fields in Angular Document Editor component

[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) has preservation support for all types of fields in an existing word document without any data loss.
[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) has preservation support for all types of fields in an existing word document without any data loss.

## Adding Fields

Expand All @@ -24,11 +24,11 @@ let fieldResult: string = '«First Name»';
this.documentEditor.editor.insertField(fieldCode, fieldResult);
```

>Note: Document editor does not validate/process the field code/field result. it simply inserts the field with specified field information.
N> Document Editor does not validate/process the field code/field result. It simply inserts the field with specified field information.

## Update fields

Document Editor provides support for updating bookmark cross reference field. The following example code illustrates how to update bookmark cross reference field.
Document Editor provides support for updating bookmark cross reference fields. The following example code illustrates how to update bookmark cross reference fields.

```typescript
//Update all the bookmark cross reference field in the document.
Expand All @@ -54,7 +54,7 @@ You can get field code and field result of the current selected field by using [
let fieldInfo: FieldInfo = this.documentEditor.selection.getFieldInfo();
```

>Note: For nested fields, this method returns combined field code and result.
N> For nested fields, this method returns combined field code and result.

## Set field info

Expand All @@ -74,7 +74,7 @@ fieldInfo.result = '«First Name»';
this.documentEditor.editor.setFieldInfo(fieldInfo);
```

>Note: For nested field, entire field gets replaced completely with the specified field information.
N> For nested field, entire field gets replaced completely with the specified field information.

## See Also

Expand Down
26 changes: 13 additions & 13 deletions Document-Processing/Word/Word-Processor/angular/find-and-replace.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
---
layout: post
title: Find and replace in Angular Document editor component | Syncfusion
description: Learn here all about Find and replace in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Find and replace in Angular DOCX Editor component | Syncfusion
description: Learn here all about Find and replace in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Find and replace
control: Find and replace
documentation: ug
domainurl: ##DomainURL##
---

# Find and replace in Angular Document editor component
# Find and replace in Angular Document Editor component

The [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) component searches a portion of text in the document through a built-in interface called `OptionsPane` or rich APIs. When used in combination with selection performs various operations on the search results like replacing it with some other text, highlighting it, making it bolder, and more.
The [Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) component searches a portion of text in the document through a built-in interface called `OptionsPane` or rich APIs. When used in combination with selection, it performs various operations on the search results like replacing it with some other text, highlighting it, making it bolder, and more.

## Options pane

This provides the options to search for a portion of text in the document. After search operation is completed, the search results will be displayed in a list and options to navigate between them. The current occurrence of matched text or all occurrences with another text can be replaced by switching to `Replace` tab. This pane is opened using the keyboard shortcut `CTRL+F`. You can also open it programmatically using the following sample code.
This provides the options to search for a portion of text in the document. After search operation is completed, the search results will be displayed in a list and options to navigate between them. The current occurrence of matched text or all occurrences can be replaced with another text by switching to `Replace` tab. This pane is opened using the keyboard shortcut `CTRL+F`. You can also open it programmatically using the following sample code.

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
Expand Down Expand Up @@ -44,25 +44,25 @@ The [`Search`](https://ej2.syncfusion.com/angular/documentation/api/document-edi

Using [`find()`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/search/#find/) method, you can find the immediate occurrence of specified text from current cursor position in the document.

The following example code illustrates how to use find in Document editor.
The following example code illustrates how to use find in Document Editor.

```typescript
this.documenteditor.search.find('Some text', 'None');
```

>Note: Second parameter is optional parameter and it denotes find Options. Possible values of find options are `'None' |'WholeWord' |'CaseSensitive'| 'CaseSensitiveWholeWord'`.
N> Second parameter is optional parameter and it denotes find Options. Possible values of find options are `'None' |'WholeWord' |'CaseSensitive'| 'CaseSensitiveWholeWord'`.

### Find all the occurrences in the document

Using [`findAll()`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/search/#findall/) method, you can find all the occurrences of specified text in the whole document and highlight it with yellow.

The following example code illustrates how to find All the text in the document.
The following example code illustrates how to find all the text in the document.

```typescript
this.documenteditor.search.findAll('Some text', 'None');
```

>Note: Second parameter is optional parameter and it denotes find Options. Possible values of find options are `'None' |'WholeWord' |'CaseSensitive'| 'CaseSensitiveWholeWord'`.
N> Second parameter is optional parameter and it denotes find Options. Possible values of find options are `'None' |'WholeWord' |'CaseSensitive'| 'CaseSensitiveWholeWord'`.

## Search results

Expand All @@ -79,7 +79,7 @@ The [`SearchResults`](https://ej2.syncfusion.com/angular/documentation/api/docum

Using [`replaceAll`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/searchResults/#replaceall/), you can replace all the occurrences with specified text.

The following example code illustrates how to use replace All in Document editor.
The following example code illustrates how to use Replace All in Document Editor.

```typescript
this.documentEditor.search.findAll ('Some text');
Expand All @@ -89,9 +89,9 @@ this.documentEditor.search.searchResults.replaceAll("Mike");

### Replace

Using [`insertText`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor/#inserttext/), you can replace the current searched text with specified text and it replace single occurrence.
Using [`insertText`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor/#inserttext/), you can replace the current searched text with specified text and it replaces a single occurrence.

>Note: This [`insertText`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor/#inserttext/) API accepts following control characters
N>s [`insertText`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor/#inserttext/) API accepts following control characters
>* New line characters ("\r", "\r\n", "\n") - Inserts a new paragraph and appends the remaining text to the new paragraph.
>* Line break character ("\v") - Moves the remaining text to start in new line.
>* Tab character ("\t") - Allocates a tab space and continue the next character.
Expand Down
26 changes: 13 additions & 13 deletions Document-Processing/Word/Word-Processor/angular/form-fields.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
---
layout: post
title: Form fields in Angular Document editor component | Syncfusion
description: Learn here all about Form fields in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Form fields in Angular DOCX Editor component | Syncfusion
description: Learn here all about Form fields in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Form fields
control: Form fields
documentation: ug
domainurl: ##DomainURL##
---

# Form fields in Angular Document editor component
# Form fields in Angular Document Editor component

[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) Container component provide support for inserting Text, CheckBox, DropDown form fields through in-built toolbar.
[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) Container component provides support for inserting Text, CheckBox, DropDown form fields through in-built toolbar.

![Form Fields](images/toolbar-form-fields.png)

Expand All @@ -29,7 +29,7 @@ this.documentEditor.editor.insertFormField('DropDown');

## Get form field names

All the form fields names form current document can be retrieved using [`getFormFieldNames()`](https://ej2.syncfusion.com/angular/documentation/api/document-editor#getformfieldnames).
All the form fields names from current document can be retrieved using [`getFormFieldNames()`](https://ej2.syncfusion.com/angular/documentation/api/document-editor#getformfieldnames).

```typescript
let formFieldsNames: string[] = this.documentEditor.getFormFieldNames();
Expand Down Expand Up @@ -67,14 +67,14 @@ checkboxfieldInfo.defaultValue = true;
checkboxfieldInfo.name = "Check2";
this.documentEditor.setFormFieldInfo('Check1',checkboxfieldInfo);

// Set checkbox form field properties
// Set dropdown form field properties
let dropdownfieldInfo: DropDownFormFieldInfo = this.documentEditor.getFormFieldInfo('Drop1') as DropDownFormFieldInfo;
dropdownfieldInfo.dropdownItems = ['One','Two', 'Three'];
dropdownfieldInfo.name = "Drop2";
this.documentEditor.setFormFieldInfo('Drop1',dropdownfieldInfo);
```

>Note:If a form field already exists in the document with the new name specified, the old form field name property will be cleared and it will not be accessible. Ensure the new name is unique.
N> If a form field already exists in the document with the new name specified, the old form field name property will be cleared and it will not be accessible. Ensure the new name is unique.

## Form Field Shading

Expand All @@ -94,7 +94,7 @@ N> This customization only affects the application UI and will not be preserved

## Export form field data

Data of the all the Form fields in the document can be exported using [`exportFormData`](https://ej2.syncfusion.com/angular/documentation/api/document-editor#exportformdata).
Data of all the Form fields in the document can be exported using [`exportFormData`](https://ej2.syncfusion.com/angular/documentation/api/document-editor#exportformdata).

```typescript
let formFieldDate: FormFieldData[] = this.documentEditor.exportFormData();
Expand Down Expand Up @@ -124,9 +124,9 @@ this.documentEditor.resetFormFields();

Document Editor provides support for protecting the document with `FormFieldsOnly` protection. In this protection, user can only fill form fields in the document.

Document editor provides an option to protect and unprotect document using [`enforceProtection`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor#enforceprotection) and [`stopProtection`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor#stopprotection) API.
Document Editor provides an option to protect and unprotect document using [`enforceProtection`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor#enforceprotection) and [`stopProtection`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor#stopprotection) API.

The following example code illustrates how to enforce and stop protection in Document editor container.
The following example code illustrates how to enforce and stop protection in Document Editor container.

```typescript
import { Component, OnInit, ViewChild } from '@angular/core';
Expand Down Expand Up @@ -172,9 +172,9 @@ export class AppComponent implements OnInit {
}
```

> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
N> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.

>Note: In enforce Protection method, first parameter denotes password and second parameter denotes protection type. Possible values of protection type are `NoProtection |ReadOnly |FormFieldsOnly |CommentsOnly`. In stop protection method, parameter denotes the password.
N> In the enforceProtection method, first parameter denotes password and second parameter denotes protection type. Possible values of protection type are `NoProtection |ReadOnly |FormFieldsOnly |CommentsOnly`. In stop protection method, parameter denotes the password.

## Online Demo

Expand Down
Loading