Skip to content

1044836-Update UG Documentation in Angular #4245

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 1 commit into
base: hotfix/hotfix-v34.2.2
Choose a base branch
from
Open

1044836-Update UG Documentation in Angular #4245

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
14 changes: 7 additions & 7 deletions Document-Processing/Word/Word-Processor/angular/how-to/show-hide-spinner.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
---
layout: post
title: Show hide spinner in Angular Document editor component | Syncfusion
description: Learn here all about Show hide spinner in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Show hide spinner in Angular DOCX Editor component | Syncfusion
description: Learn here all about Show hide spinner in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Show hide spinner
documentation: ug
domainurl: ##DomainURL##
---

# Show hide spinner in Angular Document editor component
# Show hide spinner in Angular Document Editor component

Using [`spinner`](https://ej2.syncfusion.com/documentation/spinner/getting-started#create-the-spinner-globally) component, you can show/hide spinner while opening document in [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor).
Using the [`spinner`](https://ej2.syncfusion.com/documentation/spinner/getting-started#create-the-spinner-globally) component, you can show or hide a spinner while opening a document in the [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor).

Example code snippet to show/hide spinner
Example code snippet to show or hide a spinner:

```typescript
// showSpinner() will make the spinner visible
showSpinner(document.getElementById('container'));

// hideSpinner() method used hide spinner
// hideSpinner() method is used to hide the spinner
hideSpinner(document.getElementById('container'));
```

Expand All @@ -39,4 +39,4 @@ Refer to the following example.
> 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 above example, we have used setInterval to hide spinner, just for demo purpose.
N> In the above example, we have used setInterval to hide the spinner, just for demo purposes.
22 changes: 11 additions & 11 deletions Document-Processing/Word/Word-Processor/angular/image.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
---
layout: post
title: Image in Angular Document editor component | Syncfusion
description: Learn here all about Image in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Image in Angular DOCX Editor component | Syncfusion
description: Learn here all about Image in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Image
documentation: ug
domainurl: ##DomainURL##
---

# Image in Angular Document editor component
# Image in Angular Document Editor component

[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) supports common raster format images like PNG, BMP, JPEG, SVG and GIF. You can insert an image file or online image in the document using the [`insertImage()`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor/#insertimage/) method. Refer to the following sample code.
[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) supports common raster image formats such as PNG, BMP, JPEG, SVG, and GIF. You can insert an image file or an online image in the document using the [`insertImage()`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor#insertimage) method. Refer to the following sample code.

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
Expand All @@ -24,35 +24,35 @@ domainurl: ##DomainURL##

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

Image files will be internally converted to base64 string. Whereas, online images are preserved as URL.
Image files are internally converted to base64 strings, whereas online images are preserved as URLs.

>Note: EMF and WMF images can't be inserted, but these types of images will be preserved in Document Editor when using ASP.NET MVC Web API.
N>: EMF and WMF images can't be inserted, but these types of images will be preserved in Document Editor when using ASP.NET MVC Web API.

## Image resizing

Document Editor provides built-in image resizer that can be injected into your application based on the requirements. This allows you to resize the image by dragging the resizing points using mouse or touch interactions. This resizer appears as follows.
Document Editor provides a built-in image resizer that can be injected into your application based on the requirements. This allows you to resize the image by dragging the resizing points using a mouse or touch interactions. This resizer appears as follows.

![Image](images/image.png)

## Changing size

Document Editor expose API to get or set the size of the selected image. Refer to the following sample code.
Document Editor exposes an API to get or set the size of the selected image. Refer to the following sample code.

```typescript
this.documentEditor.selection.imageFormat.width = 800;
this.documentEditor.selection.imageFormat.height = 800;
```

>Note: Images are stored and processed(read/write) as base64 string in DocumentEditor. The online image URL is preserved as a URL in Document Editor upon saving.
N>: Images are stored and processed (read/write) as base64 string in DocumentEditor. The online image URL is preserved as a URL in DocumentEditor upon saving.

## Text wrapping style

Text wrapping refers to how images fit with surrounding text in a document. Please [refer to this page](./text-wrapping-style) for more information about text wrapping styles available in Word documents.

## Positioning the image

DocumentEditor preserves the position properties of the image and displays the image based on position properties. It does not support modifying the position properties. Whereas the image will be automatically moved along with text edited if it is positioned relative to the line or paragraph.
DocumentEditor preserves the position properties of the image and displays the image based on these position properties. It does not support modifying the position properties. The image will be automatically moved along with the edited text if it is positioned relative to the line or paragraph.

## See Also
## See also

* [Feature modules](./feature-module)
Loading