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
57 changes: 28 additions & 29 deletions Document-Processing/Word/Word-Processor/angular/paragraph-format.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
---
layout: post
title: Paragraph format in Angular Document editor component | Syncfusion
description: Learn here all about Paragraph format in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Paragraph format in Angular DOCX Editor component | Syncfusion
description: Learn here all about Paragraph format in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Paragraph format
documentation: ug
domainurl: ##DomainURL##
---

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

[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) supports various paragraph formatting options such as text alignment, indentation, paragraph spacing, and more.
[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) supports various paragraph formatting options such as text alignment, indentation, paragraph spacing, and more.

## Indentation

Expand All @@ -23,23 +23,23 @@ this.documentEditor.selection.paragraphFormat.rightIndent= 24;

## Special indentation

You can define special indent for first line of the paragraph using the following sample code.
You can define a special indent for the first line of the paragraph using the following sample code.

```typescript
this.documentEditor.selection.paragraphFormat.firstLineIndent= 24;
```

## Increase indent

You can increase the left indent of selected paragraphs by a factor of 36 points using the following sample code.
You can increase the left indent of selected paragraphs by 36 points using the following sample code.

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

## Decrease indent

You can decrease the left indent of selected paragraphs by a factor of 36 points using the following sample code.
You can decrease the left indent of selected paragraphs by 36 points using the following sample code.

```typescript
this.documentEditor.editor.decreaseIndent();
Expand Down Expand Up @@ -87,27 +87,11 @@ this.documentEditor.selection.paragraphFormat.spaceBeforeAuto = true;
this.documentEditor.selection.paragraphFormat.spaceAfterAuto = true;
```

>Note: If auto spacing property is enabled, then value defined in the `beforeSpacing` and `afterSpacing` property will not be considered.
N>: If auto spacing property is enabled, then value defined in the `beforeSpacing` and `afterSpacing` property will not be considered.

## Pagination properties
## Paragraph border

You can enable or disable the following pagination properties for the paragraphs in a Word document.

* Widow/Orphan control - whether the first and last lines of the paragraph are to remain on the same page as the rest of the paragraph when paginating the document.
* Keep with next - whether the specified paragraph remains on the same page as the paragraph that follows it while paginating the document.
* Keep lines together - whether all lines in the specified paragraphs remain on the same page while paginating the document.

The following example code illustrates how to enable or disable these pagination properties for the selected paragraphs.

```typescript
this.documenteditor.selection.paragraphFormat.widowControl = false;
this.documenteditor.selection.paragraphFormat.keepWithNext = true;
this.documenteditor.selection.paragraphFormat.keepLinesTogether = true;
```

## Paragraph Border

You can apply borders to the paragraphs in a Word document. Using borders, decorate the paragraphs to set them apart from other paragraphs in the document.
You can apply borders to the paragraphs in a Word document. Using borders, you can decorate the paragraphs to set them apart from other paragraphs in the document.

The following example code illustrates how to apply box border for the selected paragraphs.

Expand All @@ -131,14 +115,29 @@ this.documenteditor.selection.paragraphFormat.borders.top.color = "#000000";
this.documenteditor.selection.paragraphFormat.borders.bottom.lineStyle = 'Single';
this.documenteditor.selection.paragraphFormat.borders.bottom.lineWidth = 3;
this.documenteditor.selection.paragraphFormat.borders.bottom.color = "#000000";

```

Note: At present, the Document editor component displays all the border styles as single line. But you can apply any border style and get the proper display in Microsoft Word app when opening the exported Word document.
N> At present, the Document Editor component displays all the border styles as single line. But you can apply any border style and get the proper display in Microsoft Word app when opening the exported Word document.

## Pagination properties

You can enable or disable the following pagination properties for the paragraphs in a Word document.

* Widow/Orphan control - whether the first and last lines of the paragraph are to remain on the same page as the rest of the paragraph when paginating the document.
* Keep with next - whether the specified paragraph remains on the same page as the paragraph that follows it while paginating the document.
* Keep lines together - whether all lines in the specified paragraphs remain on the same page while paginating the document.

The following example code illustrates how to enable or disable these pagination properties for the selected paragraphs.

```typescript
this.documenteditor.selection.paragraphFormat.widowControl = false;
this.documenteditor.selection.paragraphFormat.keepWithNext = true;
this.documenteditor.selection.paragraphFormat.keepLinesTogether = true;
```

## Show or Hide Paragraph marks

You can show or hide the hidden formatting symbols like spaces, tab, paragraph marks, and breaks in Document editor component. These marks help identify the start and end of a paragraph and all the hidden formatting symbols in a Word document.
You can show or hide the hidden formatting symbols like spaces, tab, paragraph marks, and breaks in Document Editor component. These marks indicate the start and end of a paragraph, as well as all the hidden formatting symbols in a Word document.

The following example code illustrates how to show or hide paragraph marks.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ documentation: ug
domainurl: ##DomainURL##
---

# Unsupported Features in Angular DOCX Editor
# Unsupported Features in Angular Document Editor

This section describes the unsupported elements in [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor)
This section describes the unsupported elements in [Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor).

## Document formatting

Expand All @@ -19,25 +19,25 @@ This section describes the unsupported elements in [Angular DOCX Editor](https:/
| Paragraph Properties | Shading | No |
| | Mirror indent | No |
| | Suppress line numbers | No |
| | Dont hyphenate | No |
| | Border styles (*Except dotted and dashed; other styles are rendered as solid*) | Partial |
| Text Properties | Shading | No |
| | Position | No |
| | Font kerning | No |
| | Ligatures | No |
| | Number spacing | No |
| | Number forms | No |
| | Stylistic sets | No |
| | Contextual alternates| No |
| | Don't hyphenate | No |
| | Border styles (except dotted and dashed; other styles are rendered as solid) | Partial |
| Text Properties | Shading | No |
| | Position | No |
| | Font kerning | No |
| | Ligatures | No |
| | Number spacing | No |
| | Number forms | No |
| | Stylistic sets | No |
| | Contextual alternates | No |
| | Text Direction (Top to Bottom, Bottom to Top) | No |
| | Border styles (*Except dotted and dashed; other styles are rendered as solid*) | Partial |
| | Border styles (except dotted and dashed; other styles are rendered as solid) | Partial |
| Section Formatting | Mirror margins | No |
| | Gutter | No |
| | Line numbers | No |
| | Bi-direction | No |
| Page background | Page background color or image | No |
| Watermark | Text and Picture watermark| No |
| Table Format | Border styles (*Except dotted and dashed; other styles are rendered as solid*) | Partial |
| Watermark | Text and Picture watermark | No |
| Table Format | Border styles (except dotted and dashed; other styles are rendered as solid) | Partial |

## Word Document Elements

Expand All @@ -49,8 +49,8 @@ This section describes the unsupported elements in [Angular DOCX Editor](https:/
| Ink/Draw | No |
| Video or audio files | No |
| Macros | No |
| Models, Smart-Art, and Charts | [Supported Charts](https://help.syncfusion.com/document-processing/word/word-processor/angular/chart) |
| Shapes, Textboxes, and WordArt | [Supported shapes](https://help.syncfusion.com/document-processing/word/word-processor/angular/shapes#supported-shapes) *(Shape Properties: Fill types, borders, rotation and effects are not supported) |
| Models, SmartArt, and Charts | [Supported Charts](https://help.syncfusion.com/document-processing/word/word-processor/angular/chart) |
| Shapes, Textboxes, and WordArt | [Supported shapes](https://help.syncfusion.com/document-processing/word/word-processor/angular/shapes#supported-shapes) (Shape Properties: Fill types, borders, rotation, and effects are not supported) |
| Signature line | No |
| Special Characters, Symbols, Equations | No |
| Built-in and custom document properties | No |
Expand Down
26 changes: 13 additions & 13 deletions Document-Processing/Word/Word-Processor/angular/view.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
---
layout: post
title: View in Angular Document editor component | Syncfusion
description: Learn here all about View in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: View in Angular DOCX Editor component | Syncfusion
description: Learn here all about View in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
control: View
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---
# View in Angular Document Editor Component

## Web Layout
## Web layout

[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) container component allows you to change the view to web layout and print using the [`layoutType`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container#layouttype) property with the supported [`LayoutType`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/layoutType).
[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) container component allows you to change the view to a web layout or print layout using the [`layoutType`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container#layouttype) property with the supported [`LayoutType`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/layoutType).

```typescript
/**
Expand All @@ -37,17 +37,17 @@ export class AppComponent {

> 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: Default value of [`layoutType`](https://ej2.syncfusion.com/angular/documentation/api/document-editor#layouttype) in DocumentEditorContainer component is [`Pages`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/layoutType).
N> The default value of [`layoutType`](https://ej2.syncfusion.com/angular/documentation/api/document-editor#layouttype) in the Document Editor Container component is [`Pages`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/layoutType).

### Online Demo

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

## Ruler

Using ruler we can refer to setting specific margins, tab stops, or indentations within a document to ensure consistent formatting in Document Editor.
The ruler helps you set specific margins, tab stops, and indentations within a document to ensure consistent formatting in the Document Editor.

The following example illustrates how to enable ruler in Document Editor
The following example illustrates how to enable the ruler in the Document Editor.

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
Expand All @@ -63,13 +63,13 @@ The following example illustrates how to enable ruler in Document Editor

### Online Demo

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

## Heading Navigation Pane
## Heading Navigation Pane

Using the heading navigation pane allows users to swiftly navigate documents by heading, enhancing their ability to move through the document efficiently.
The heading navigation pane allows users to quickly navigate documents by heading, making it easier to move through the document.

The following example demonstrates how to enable the heading navigation pane in a document editor.
The following example demonstrates how to enable the heading navigation pane in a Document Editor.

```typescript
import { Component, OnInit } from '@angular/core';
Expand All @@ -91,4 +91,4 @@ export class AppComponent implements OnInit {

### Online Demo

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