Skip to content

1044836-Updated Angular Documentation #4241

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
Vellaisamy5301 wants to merge 2 commits into
base: hotfix/hotfix-v34.2.2
Choose a base branch
from
Open

1044836-Updated Angular Documentation #4241

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
e63c8b8
1044836-print,restrict-editing,ribbon,right-to-left files
Vellaisamy5301 Aug 7, 2026
1377d46
1044836-changed feature-module file
Vellaisamy5301 Aug 7, 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
22 changes: 11 additions & 11 deletions Document-Processing/Word/Word-Processor/angular/feature-module.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
---
layout: post
title: Feature module in Angular Document editor component | Syncfusion
description: Learn here all about Feature module in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Feature module in Angular DOCX Editor component | Syncfusion
description: Learn here all about Feature module in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Feature module
documentation: ug
domainurl: ##DomainURL##
---

# Feature module in Angular Document editor component
# Feature module in Angular Document Editor component

[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) features are segregated into individual feature-wise modules to enable selective referencing. By default, the document editor displays the document in read-only mode. The required modules should be injected to extend its functionality. The following are the selective modules of document editor that can be included as required:
[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) features are segregated into individual feature-wise modules to enable selective referencing. By default, the Document Editor displays the document in read-only mode. The required modules should be injected to extend its functionality. The following are the selective modules of Document Editor that can be included as required:
* **PrintService** - Prints the document.
* **SfdtExportService** - Exports the document as Syncfusion<sup style="font-size:70%">&reg;</sup> Document Text (.SFDT) file.
* **SelectionService** - Selects a portion of the document and copy it to the clipboard.
* **SearchService** - Searches specific text and navigate between the results.
* **SelectionService** - Selects a portion of the document and copies it to the clipboard.
* **SearchService** - Searches specific text and navigates between the results.
* **WordExportService** - Exports the document as Word Document (.DOCX) file.
* **TextExportService** - Exports the document as Text Document (.TXT) file.
* **EditorService** - Performs all kind of editing operations.
* **EditorService** - Performs all kinds of editing operations.
* **EditorHistoryService** - Maintains the history of editing operations so that you can perform undo and redo at any time.
* User interface options such as context menu, options pane, image resizer, and dialog are available as individual modules.

>In addition to injecting the required modules in your application, enable corresponding properties to extend the functionality for a document editor instance.
>In addition to injecting the required modules in your application, enable corresponding properties to extend the functionality for a Document Editor instance.
Refer to the following table.

| Module | Dependent modules to be injected for extending the functionality of document editor in your application | Property to enable the functionality for a document editor instance |
| Module | Dependent modules to be injected for extending the functionality of Document Editor in your application | Property to enable the functionality for a Document Editor instance |
|---|---|---|
|PrintService|`PrintService`|`<ejs-documenteditor [enablePrint]=true></ejs-documenteditor>`|
|SfdtExportService|`SfdtExportService`|`<ejs-documenteditor [enableSfdtExport]=true></ejs-documenteditor>`|
Expand All @@ -42,7 +42,7 @@ Refer to the following table.
|TableDialogService|`SelectionService, EditorService, TableDialogService`|`<ejs-documenteditor [isReadOnly]: false [enableEditor]=true [enableTableDialog]=true></ejs-documenteditor>`|
|FontDialogService|`SelectionService, EditorService, FontDialogService`|`<ejs-documenteditor [isReadOnly]: false [enableEditor]=true [enableFontDialog]=true></ejs-documenteditor>`|
|ParagraphDialogService|`SelectionService, EditorService, ParagraphDialogService`|`<ejs-documenteditor [isReadOnly]: false [enableEditor]=true [enableParagraphDialog]=true></ejs-documenteditor>`|
|BookmarkDialogService|`SelectionService, EditorService, BookmarkDialogService`|`<ejs-documenteditor [isReadOnly]: false [enableEditor]=true enabl[eBookmarkDialog=true></ejs-documenteditor>`|
|BookmarkDialogService|`SelectionService, EditorService, BookmarkDialogService`|`<ejs-documenteditor [isReadOnly]: false [enableEditor]=true [enableBookmarkDialog]=true></ejs-documenteditor>`|
|PageSetupDialogService|`SelectionService, EditorService, PageSetupDialogService`|`<ejs-documenteditor [isReadOnly]: false [enableEditor]=true [enablePageSetupDialog]=true></ejs-documenteditor>`|
|TableOfContentsDialogService|`SelectionService, EditorService, TableOfContentsDialogService`|`<ejs-documenteditor [isReadOnly]: false [enableEditor]=true [enableTableOfContentsDialog]=true></ejs-documenteditor>`|
|ListDialog|`SelectionService, EditorService, ListDialog`|`<ejs-documenteditor [isReadOnly]: false [enableEditor]=true [enableListDialog]=true></ejs-documenteditor>`|
Expand All @@ -54,4 +54,4 @@ Refer to the following table.
|StyleDialogService|`SelectionService, EditorService, StyleDialogService`|`<ejs-documenteditor [isReadOnly]: false [enableEditor]=true [enableStyleDialog]=true></ejs-documenteditor>`|
|BulletsAndNumberingDialogService|`SelectionService, EditorService, BulletsAndNumberingDialogService`|`<ejs-documenteditor [isReadOnly]: false [enableEditor]=true [enableStyleDialog]=true></ejs-documenteditor>`|

These modules should be injected into the `providers` section of root `NgModule` or component class.
These modules should be injected into the `providers` section of the root `NgModule` or component class.
26 changes: 13 additions & 13 deletions Document-Processing/Word/Word-Processor/angular/print.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
---
layout: post
title: Print in Angular Document editor component | Syncfusion
description: Learn here all about Print in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Print in Angular DOCX Editor component | Syncfusion
description: Learn here all about Print in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Print
documentation: ug
domainurl: ##DomainURL##
---

# Print in Angular Document editor component
# Print in Angular Document Editor component

To print the document, use the [`print`](https://ej2.syncfusion.com/angular/documentation/api/document-editor#print) method from document editor instance.
To print the document, use the [`print`](https://ej2.syncfusion.com/angular/documentation/api/document-editor#print) method from the Document Editor instance.

Refer to the following example for showing a document and print it.
Refer to the following example for showing a document and printing it.

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
Expand All @@ -26,7 +26,7 @@ Refer to the following example for showing a document and print it.

{% previewsample "/document-processing/samples/document-editor/angular/link-cs5" %}

Refer to the following example for creating a document and print it.
Refer to the following example for creating a document and printing it.

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
Expand All @@ -42,9 +42,9 @@ Refer to the following example for creating a document and print it.

## Improve print quality

Document editor provides an option to improve the print quality using [`printDevicePixelRatio`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documentEditorSettingsModel#printdevicepixelratio) in Document editor settings. Document editor using canvas approach to render content. Then, canvas are converted to image and it process for print. Using printDevicePixelRatio API, you can increase the image quality based on your requirement.
The Document Editor provides an option to improve the print quality using [`printDevicePixelRatio`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documentEditorSettingsModel#printdevicepixelratio) in Document Editor settings. The Document Editor uses a canvas approach to render content. The canvas is then converted to an image and processed for print. Using the `printDevicePixelRatio` API, you can increase the image quality based on your requirement.

The following example code illustrates how to improve the print quality in Document editor container.
The following example code illustrates how to improve the print quality in the Document Editor container.

```typescript
import { Component, OnInit } from '@angular/core';
Expand All @@ -65,11 +65,11 @@ 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.

>Note: By default, printDevicePixelRatio value is 1.
N> By default, the `printDevicePixelRatio` value is 1.

## Print using window object

You can print the document in document editor by passing the window instance. This is useful to implement print in third party frameworks such as electron, where the window instance will not be available. Refer to the following example.
You can print the document in the Document Editor by passing the window instance. This is useful to implement print in third-party frameworks such as Electron, where the window instance will be available. Refer to the following example.

```typescript
import { NgModule } from '@angular/core';
Expand Down Expand Up @@ -142,13 +142,13 @@ Some of the print options cannot be configured using JavaScript. Refer to the fo
* [`Chrome`](https://support.google.com/chrome/answer/1069693?hl=en&visit_id=1-636335333734668335-3165046395&rd=1/)
* [`Firefox`](https://support.mozilla.org/en-US/kb/how-print-web-pages-firefox/)

However, you can customize margins, paper, and layout options by modifying the section format properties using page setup dialog
However, you can customize margins, paper, and layout options by modifying the section format properties using the page setup dialog.

```typescript
this.documentEditor.showPageSetupDialog();
```

By customizing margins, papers, and layouts, the layout of the document will be changed in document editor. To modify these options during print operation, serialize the document as SFDT using the [`serialize`](https://ej2.syncfusion.com/angular/documentation/api/document-editor#serialize) method in document editor instance and open the SFDT data in another instance of document editor in separate window.
By customizing margins, papers, and layouts, the layout of the document will be changed in the Document Editor. To modify these options during the print operation, serialize the document as SFDT using the [`serialize`](https://ej2.syncfusion.com/angular/documentation/api/document-editor#serialize) method in the Document Editor instance and open the SFDT data in another instance of the Document Editor in a separate window.

The following example shows how to customize layout options only for printing.

Expand All @@ -164,6 +164,6 @@ The following example shows how to customize layout options only for printing.

{% previewsample "/document-processing/samples/document-editor/angular/link-cs7" %}

## Online Demo
## Online demo

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