Skip to content

1043287: update angular file #3974

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
Krishna5272 wants to merge 1 commit into
base: development
Choose a base branch
from
Open

1043287: update angular file #3974

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 ...rocessing/Word/Word-Processor/angular/how-to/customize-font-family-drop-down.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
---
layout: post
title: Customize Font Family Dropdown in Angular Document Editor | Syncfusion
description: Learn here all about Customize font family drop down in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Customize font family drop down in Angular Document Editor component | Syncfusion
description: Learn here all about Customize font family drop down in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Customize font family drop down
documentation: ug
domainurl: ##DomainURL##
---

# Customize font family drop down in Angular Document editor
# Customize font family drop down in Angular Document Editor component

[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) provides an options to customize the font family drop down list values using [`fontFamilies`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documentEditorSettingsModel/#fontfamilies) in Document editor settings. Fonts which are added in fontFamilies of [`documentEditorSettings`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/#documenteditorsettings) will be displayed on font drop down list of text properties pane and font dialog.
[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) provides options to customize the font family drop-down list values using [`fontFamilies`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documentEditorSettingsModel/#fontfamilies) in Document editor settings. Fonts added in the fontFamilies of [`documentEditorSettings`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/#documenteditorsettings) will be displayed in the font drop-down list of the Text Properties pane and the Font dialog.

Similarly, you can use [`documentEditorSettings`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#documenteditorsettings) property for DocumentEditor also.

Expand All @@ -26,15 +26,15 @@ import { ToolbarService } from '@syncfusion/ej2-angular-documenteditor';
providers: [ToolbarService]
})
export class AppComponent implements OnInit {
// Add required font families to list it in font drop down
// Add the required font families to list them in the font drop-down
public fontFamilies={fontFamilies :['Algerian', 'Arial', 'Calibri', 'Cambria']};
ngOnInit(): void {
}
}
```

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

Output will be like below:
The output will be as shown below:

![Font](../images/font-family.png)
30 changes: 15 additions & 15 deletions Document-Processing/Word/Word-Processor/angular/how-to/customize-ribbon.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
---
layout: post
title: Customize Ribbon in Angular Document editor component | Syncfusion
title: Customize Ribbon in Angular DOCX Editor component | Syncfusion
description: Learn how to customize the ribbon in Syncfusion Angular Document Editor - file menu, backstage, tabs, groups, and items.
platform: document-processing
control: Ribbon Customization
documentation: ug
domainurl: ##DomainURL##
---

# Customize Ribbon in Angular Document Document Editor
# Customize Ribbon in Angular Document Editor component

The [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) provides an extensive and flexible API to customize the built-in ribbon UI. You can:
The [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) provides a rich and flexible API to customize the built-in ribbon UI. You can:

- Customize the File menu.
- Add the Backstage menu instead of File menu.
Expand All @@ -22,7 +22,7 @@ Below are detailed examples for each ribbon customization scenario.

## File Menu Customization

Document Editor provides APIs to remove existing File menu items and add new custom items based on your requirements. You can modify the File menu using the [`fileMenuItems`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container#filemenuitems) property.
Document Editor provides APIs to remove existing built-in File menu items and add new custom items based on your requirements. You can modify the File menu using the [`fileMenuItems`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container#filemenuitems) property.

In the example below, the "Open" and "Export" items have been removed from the File Menu Items, and new custom items have been added.

Expand Down Expand Up @@ -71,7 +71,7 @@ export class AppComponent {

## Backstage Menu Customization

The Document Editor provides an [`backStageMenu`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container#backStageMenu) API to add a backstage menu. When the backstage menu is enabled, the default File menu items are automatically hidden.
The Document Editor provides a [`backStageMenu`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container#backStageMenu) API to add a backstage menu. When the backstage menu is enabled, the default File menu items are automatically hidden.

The following code example shows how to add the backstage menu items.

Expand Down Expand Up @@ -104,25 +104,25 @@ export class AppComponent {

public backstageMenu = {
text: 'File',
backButton: { text: 'close' },
backButton: { text: 'Close' },
items: [
{ id: 'new', text: 'New', iconCss: 'e-icons e-de-ctnr-new' }
]
};
}
```

Refer this documentation know more about [`backstage items`](https://ej2.syncfusion.com/documentation/ribbon/backstage)
Refer to this documentation to know more about [`backstage items`](https://ej2.syncfusion.com/documentation/ribbon/backstage)

## Tab Customization

You can customize the ribbon tabs in the Document Editor by showing, hiding, or adding tabs according to your application's requirements.

### Show/Hide Tab

Document editor provides the [`showTab`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/ribbon#showtab) API to show and hide the existing tab using existing `RibbonTabType` and `tabId`.
Document editor provides the [`showTab`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/ribbon#showtab) API to show and hide the existing tab using a `RibbonTabType` and `tabId`.

The following code example how to show/hide existing tab using existing tab type and tab id.
The following code example shows how to show/hide an existing tab using the existing tab type and tab id.

```typescript

Expand Down Expand Up @@ -188,7 +188,7 @@ export class AppComponent implements AfterViewInit {
};
this.container.ribbon.addTab(ribbonTab);

// To add the tab before the Insert tab(exising tab)
// To add the tab before the Insert tab (existing tab)

this.container.ribbon?.addTab(ribbonTab, 'Insert');
})
Expand All @@ -204,7 +204,7 @@ You can also customize ribbon groups within a tab to better organize commands or

Document Editor provides an [`showGroup`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/ribbon#showgroup) API to show or hide existing groups within a ribbon tab.

The following code example show how to show/hide the group using group Id or [`RibbonGroupInfo`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container#ribbongroupinfo).
The following code example shows how to show/hide the group using group Id or [`RibbonGroupInfo`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container#ribbongroupinfo).

```typescript

Expand Down Expand Up @@ -281,9 +281,9 @@ You can customize individual items within ribbon groups. This includes showing,

### Show/Hide Item

Using [`showItems`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/ribbon#showitems) API in Document editor ribbon to enable/disable the existing item. Here, you can specify the item Id or [`RibbonItemInfo`].
Using the [`showItems`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/ribbon#showitems) API in the Document Editor ribbon to show/hide the existing item. Here, you can specify the item Id or [`RibbonItemInfo`].

The following code example show how to show/hide the item using item Id or [`RibbonItemInfo`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container#ribboniteminfo).
The following code example shows how to show/hide the item using item Id or [`RibbonItemInfo`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container#ribboniteminfo).

```typescript
// To hide the Bold and Italic items using ribbon item information
Expand All @@ -298,7 +298,7 @@ this.container.ribbon.showItems('custom_item', false);

### Enable/Disable Item

Using [`enableItems`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/ribbon#enableitems) API in Document editor ribbon to enable/disable the existing item.
Using the [`enableItems`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/ribbon#enableitems) API in the Document Editor ribbon to enable/disable the existing item.

```typescript
// To disable the underline using ribbon item info
Expand Down Expand Up @@ -362,4 +362,4 @@ export class AppComponent implements AfterViewInit {

## Online Demo

Explore how to customize and use the ribbon interface in the Angular Document Editor to work with Word documents in this live demo [here](https://document.syncfusion.com/demos/docx-editor/angular/#/tailwind3/document-editor/ribbon-customization).
Explore how to customize the ribbon 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/ribbon-customization).
15 changes: 8 additions & 7 deletions Document-Processing/Word/Word-Processor/angular/how-to/customize-tool-bar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,24 @@
---
layout: post
title: Customize tool bar in Angular Document editor component | Syncfusion
description: Learn here all about Customize tool bar in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Customize tool bar in Angular DOCX Editor component | Syncfusion
description: Learn here all about Customize tool bar in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Customize tool bar
documentation: ug
domainurl: ##DomainURL##
---

# Customize tool bar in Angular Document editor component
# Customize tool bar in Angular Document Editor component

## How to customize existing toolbar in DocumentEditorContainer

[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) Container allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar.
[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) Container allows you to customize (add, show, hide, enable, and disable) existing items in a toolbar.

* Add - New items can defined by [`CustomToolbarItemModel`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/customToolbarItemModel) and with existing items in [`toolbarItems`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container#toolbaritems) property. Newly added item click action can be defined in [`toolbarClick`](https://ej2.syncfusion.com/angular/documentation/api/toolbar/clickEventArgs).
* Add - New items can be defined by [`CustomToolbarItemModel`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/customToolbarItemModel) and with existing items in [`toolbarItems`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container#toolbaritems) property. Newly added item click action can be defined in [`toolbarClick`](https://ej2.syncfusion.com/angular/documentation/api/toolbar/clickEventArgs).

* Show, Hide - Existing items can be shown or hidden using the [`toolbarItems`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container#toolbaritems) property. Pre-defined toolbar items are available with [`ToolbarItem`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/toolbarItem).
* Enable, Disable - Toolbar items can be enabled or disable using [`enableItems`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/toolbar#enableitems)

* Enable, Disable - Toolbar items can be enabled or disabled using [`enableItems`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/toolbar#enableitems)

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

>Note: Default value of `toolbarItems` is `['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']`.
>N> Default value of `toolbarItems` is `['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']`.

## Online Demo

Expand Down
24 changes: 12 additions & 12 deletions ...rd/Word-Processor/angular/how-to/deploy-document-editor-component-for-mobile.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
---
layout: post
title: Deploy Document Editor for Mobile in Angular | Syncfusion
description: Learn here all about Deploy document editor component for mobile in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Deploy mobile DOCX Editor in Angular | Syncfusion
description: Learn here all about deploying in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Deploy document editor component for mobile
control: Deploy Document Editor component for mobile
documentation: ug
domainurl: ##DomainURL##
---

# Deploy document editor for mobile in Angular
# Deploy Angular Document Editor component for Mobile

## Document editor component for Mobile
## Document Editor component for mobile

At present, [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) component is not responsive for mobile, and we haven't ensured the editing functionalities in mobile browsers. Whereas it works properly as a document viewer in mobile browsers.
At present, [Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) component is not responsive for mobile, and editing functionalities are not supported in mobile browsers. However, it works properly as a document viewer in mobile browsers.

Hence, it is recommended to switch the Document editor component as read-only in mobile browsers. Also, invoke [`fitPage`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#fitpage) method with [`FitPageWidth`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/pageFitType/) parameter in document change event, such as to display one full page by adjusting the zoom factor.
Hence, it is recommended to switch the Document Editor component to read-only in mobile browsers. Also, invoke the [`fitPage`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#fitpage) method with `FitPageWidth` parameter in the document change event to display one full page by adjusting the zoom factor.

The following example code illustrates how to deploy Document Editor component for Mobile.
The following example code illustrates how to deploy the Document Editor component for mobile.

```typescript
//Initialize Document Editor Container component.
import { Component } from '@angular/core';
import { ToolbarService } from '@syncfusion/ej2-angular-documenteditor';
import { Component, ViewChild } from '@angular/core';
import { ToolbarService, DocumentEditorContainerComponent } from '@syncfusion/ej2-angular-documenteditor';
@Component({
selector: 'app-container',
// specifies the template string for the DocumentEditorContainer component
Expand Down Expand Up @@ -51,8 +51,8 @@ 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.
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.

You can download the complete working example from this [GitHub location](https://github.com/SyncfusionExamples/Deploy-Document-Editor-in-Mobile-Friendly-Web-page/)

>Note: You can use the [`restrictEditing`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/#restrictediting) in DocumentEditorContainer and [`isReadOnly`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#isreadonly) in DocumentEditor based on your requirement to change component to read only mode.
N> You can use the [`restrictEditing`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/#restrictediting) in DocumentEditorContainer and [`isReadOnly`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#isreadonly) in DocumentEditor based on your requirement to change the component to read-only mode.
Loading