HelpBot Assistant

How can I help you?

Getting started with Angular Document editor component

13 Feb 202614 minutes to read

This section explains the steps to create a Word document editor within your application and demonstrates the basic usage of the Document editor component.

To get started quickly with Document editor component using CLI, you can check the video below.

Prerequisites

System requirements for Syncfusion® Angular Document editor

Dependencies

The list of dependencies required to use the Document editor component in your application is given below:

|-- @syncfusion/ej2-angular-documenteditor
    |-- @syncfusion/ej2-angular-base
    |-- @syncfusion/ej2-documenteditor
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-buttons
    |-- @syncfusion/ej2-compression
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-dropdowns
    |-- @syncfusion/ej2-file-utils
    |-- @syncfusion/ej2-inputs
    |-- @syncfusion/ej2-lists
    |-- @syncfusion/ej2-navigations
    |-- @syncfusion/ej2-popups
    |-- @syncfusion/ej2-splitbuttons
    |-- @syncfusion/ej2-charts

Server-side dependencies

The Document editor component requires server-side interactions for the following operations:

Note: If you don’t require the above functionalities, you can deploy the component as a pure client-side solution without any server-side interactions.

For detailed information about server-side dependencies, refer to the Web Services Overview page.

Setup Angular environment

You can use Angular CLI to set up your Angular applications. To install Angular CLI, use the following command:

npm install -g @angular/[email protected]

Create an Angular application

Start a new Angular application using the Angular CLI command below:

ng new my-app

This command will prompt you for a few settings for the new project, such as whether to add Angular routing and which stylesheet format to use.

Initial_setup

By default, it will create a CSS-based application.

Next, navigate to the created project folder:

cd my-app

Adding Syncfusion® Document editor package

All available Essential® JS 2 packages are published in the npmjs.com registry.

To install the Document editor component, use the following command:

npm install @syncfusion/ej2-angular-documenteditor --save

Note: The --save flag instructs npm to include the Document editor package inside the dependencies section of the package.json file.

Adding CSS reference

The following CSS files are available in the node_modules/@syncfusion package folder. Reference these styles in the src/styles.css file using the following code:

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';

Choosing a component

  • DocumentEditorContainer: A complete solution with a predefined toolbar, properties pane, and status bar for comprehensive document editing
  • DocumentEditor: A customizable component where you build the UI according to your specific requirements

Note: Starting from version v19.3.0.x, the text size measurement accuracy has been optimized to match Microsoft Word pagination for most documents. This improvement is enabled by default. You can disable it to retain the pagination behavior of older versions if needed.

DocumentEditorContainer component

The DocumentEditorContainer is a predefined component that wraps the DocumentEditor, toolbar, properties pane, and status bar into a single component. The toolbar and properties pane allow users to view and modify documents through public APIs available in the DocumentEditor.

Adding DocumentEditorContainer component

Modify the template in the src/app/app.component.ts file to render the DocumentEditorContainer component. Add the Angular DocumentEditorContainer using the <ejs-documenteditorcontainer> selector in the template section of the app.component.ts file:

import { DocumentEditorContainerModule } from '@syncfusion/ej2-angular-documenteditor';
import { Component, OnInit } from '@angular/core';
import { ToolbarService } from '@syncfusion/ej2-angular-documenteditor';

@Component({
    imports: [        
        DocumentEditorContainerModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-documenteditorcontainer 
                   serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" 
                   height="600px" 
                   style="display:block" 
                   [enableToolbar]=true>
               </ejs-documenteditorcontainer>`,
    providers: [ToolbarService]
})
export class AppComponent implements OnInit {
    ngOnInit(): void {
    }
}

The Web API hosted link https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/ used in the Document editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, host your own web service with the required server configurations. Refer to the GitHub Web Service example or use the Docker image for hosting your own web service.

Run the DocumentEditorContainer application

The project is configured to compile and run the application in a browser. Use the following command to run the application:

ng serve --open

The DocumentEditorContainer output will be displayed as follows:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DocumentEditorContainerModule } from '@syncfusion/ej2-angular-documenteditor'



import { Component, OnInit } from '@angular/core';
import { ToolbarService } from '@syncfusion/ej2-angular-documenteditor';
@Component({
imports: [
        
        DocumentEditorContainerModule
    ],


standalone: true,
    selector: 'app-container',
    // specifies the template string for the DocumentEditorContainer component
    template: `<ejs-documenteditorcontainer serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" height="600px" style="display:block" [enableToolbar]=true> </ejs-documenteditorcontainer>`,
    providers: [ToolbarService]
})
export class AppComponent implements OnInit {

    ngOnInit(): void {
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Note: If you see a license banner when running your application, you need to obtain a license key and register it within the application to use Syncfusion components. For more information on how to obtain and register a license key, refer to the Licensing overview page.

DocumentEditor component

The DocumentEditor component is used to create, view, and edit Word documents. With this component, you can customize the UI options based on your requirements to modify documents.

Adding DocumentEditor component

Modify the template in the src/app/app.component.ts file to render the DocumentEditor component. Add the Angular DocumentEditor using the <ejs-documenteditor> selector in the template section of the app.component.ts file:

import { DocumentEditorModule } from '@syncfusion/ej2-angular-documenteditor';
import { Component, OnInit } from '@angular/core';
import { 
    PrintService, 
    SfdtExportService, 
    WordExportService, 
    TextExportService, 
    SelectionService, 
    SearchService, 
    EditorService, 
    ImageResizerService, 
    EditorHistoryService, 
    ContextMenuService, 
    OptionsPaneService, 
    HyperlinkDialogService, 
    TableDialogService, 
    BookmarkDialogService, 
    TableOfContentsDialogService, 
    PageSetupDialogService, 
    StyleDialogService, 
    ListDialogService, 
    ParagraphDialogService, 
    BulletsAndNumberingDialogService, 
    FontDialogService, 
    TablePropertiesDialogService, 
    BordersAndShadingDialogService, 
    TableOptionsDialogService, 
    CellOptionsDialogService, 
    StylesDialogService 
} from '@syncfusion/ej2-angular-documenteditor';

@Component({
    imports: [        
        DocumentEditorModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-documenteditor 
                   id="container" 
                   height="330px" 
                   serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" 
                   [isReadOnly]=false 
                   [enablePrint]=true 
                   [enableSelection]=true 
                   [enableEditor]=true 
                   [enableEditorHistory]=true 
                   [enableContextMenu]=true 
                   [enableSearch]=true 
                   [enableOptionsPane]=true>
               </ejs-documenteditor>`,
    providers: [
        PrintService, 
        SfdtExportService, 
        WordExportService, 
        TextExportService, 
        SelectionService, 
        SearchService, 
        EditorService, 
        ImageResizerService, 
        EditorHistoryService, 
        ContextMenuService, 
        OptionsPaneService, 
        HyperlinkDialogService, 
        TableDialogService, 
        BookmarkDialogService, 
        TableOfContentsDialogService, 
        PageSetupDialogService, 
        StyleDialogService, 
        ListDialogService, 
        ParagraphDialogService, 
        BulletsAndNumberingDialogService, 
        FontDialogService, 
        TablePropertiesDialogService, 
        BordersAndShadingDialogService, 
        TableOptionsDialogService, 
        CellOptionsDialogService, 
        StylesDialogService
    ]
})
export class AppComponent implements OnInit {
    ngOnInit(): void {
    }
}

The Web API hosted link https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/ used in the Document editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, host your own web service with the required server configurations. Refer to the GitHub Web Service example or use the Docker image for hosting your own web service.

Run the DocumentEditor application

Use the following command to compile and run the application in a browser:

ng serve --open

The DocumentEditor output will be displayed as follows:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'



import { Component, ViewEncapsulation } from '@angular/core';
import {
    DocumentEditorComponent, PrintService, SfdtExportService, WordExportService, TextExportService, SelectionService,
    SearchService, EditorService, ImageResizerService, EditorHistoryService, ContextMenuService,
    OptionsPaneService, HyperlinkDialogService, TableDialogService, BookmarkDialogService, TableOfContentsDialogService,
    PageSetupDialogService, StyleDialogService, ListDialogService, ParagraphDialogService, BulletsAndNumberingDialogService,
    FontDialogService, TablePropertiesDialogService, BordersAndShadingDialogService, TableOptionsDialogService,
    CellOptionsDialogService, StylesDialogService
} from '@syncfusion/ej2-angular-documenteditor';

@Component({
imports: [
        
        DocumentEditorAllModule
    ],


standalone: true,
      selector: 'app-container',
      template: `<ejs-documenteditor id="container" serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" height="330px" style="display:block" [isReadOnly]=false [enableSelection]=true
      [enablePrint]=true [enableSfdtExport]=true [enableWordExport]=true [enableOptionsPane]=true [enableContextMenu]=true
      [enableHyperlinkDialog]=true [enableBookmarkDialog]=true [enableTableOfContentsDialog]=true [enableSearch]=true
      [enableParagraphDialog]=true [enableListDialog]=true [enableTablePropertiesDialog]=true [enableBordersAndShadingDialog]=true
      [enablePageSetupDialog]=true [enableStyleDialog]=true [enableFontDialog]=true [enableTableOptionsDialog]=true
      [enableTableDialog]=true [enableImageResizer]=true [enableEditor]=true [enableEditorHistory]=true>
      </ejs-documenteditor>`,
      encapsulation: ViewEncapsulation.None,
      providers: [PrintService, SfdtExportService, WordExportService, TextExportService, SelectionService, SearchService, EditorService,
          ImageResizerService, EditorHistoryService, ContextMenuService, OptionsPaneService, HyperlinkDialogService, TableDialogService,
          BookmarkDialogService, TableOfContentsDialogService, PageSetupDialogService, StyleDialogService, ListDialogService,
          ParagraphDialogService, BulletsAndNumberingDialogService, FontDialogService, TablePropertiesDialogService,
          BordersAndShadingDialogService, TableOptionsDialogService, CellOptionsDialogService, StylesDialogService]
})

export class AppComponent {

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Frequently Asked Questions