View and Edit Word Documents in Angular Apps: Beginners’ Guide
Tags: angular, javascript, webdev, productivity
Published: 2021-06-11 12:21:47

---
title: View and Edit Word Documents in Angular Apps: Beginners’ Guide
published: true
date: 2021-06-10 11:30:52 UTC
tags: angular, javascript, webdev, productivity
canonical_url: https://www.syncfusion.com/blogs/post/view-and-edit-word-documents-in-angular.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/View-and-Edit-Word-Documents-in-Angular-Apps-Beginners%E2%80%99-Guide-672x372.png
---

This blog will explain how to view and edit Word documents with the key features of Syncfusion’s [Angular Word Processor](https://www.syncfusion.com/angular-ui-components/angular-word-processor "Link to Angular Word Processor") component, and the procedure to integrate it into an [Angular](https://en.wikipedia.org/wiki/Angular_(web_framework) "Link to Angular Wikipedia page") application.

The Syncfusion Angular Word Processor is also known as **document editor**. It is a component used to compose, edit, view, and print [Word](https://en.wikipedia.org/wiki/Microsoft_Word "Link to Microsoft Word Wikipedia page") (DOCX, WordML, DOC, RTF, TXT) documents in your Angular applications. It provides all the standard Word processing features, such as:

- Editing text
- Formatting content
- Resizing images and tables
- Finding and replacing text
- Bookmarks
- Tables of contents
- Printing
- Importing and exporting Word documents.

All the user interactions and editing operations run purely on the client side using our own SFDT (Syncfusion document text) file format. This approach provides a very fast editing experience to the end users.

Syncfusion offers two components for the same purpose:

- **Document editor** provides just the main document view area. Here, the user can compose, view, and edit the Word documents. You may prefer to use this component when you want to design your own UI options for your application.

![Syncfusion Document Editor](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Syncfusion-Document-Editor.png)<figcaption>Syncfusion Document Editor</figcaption>

- **Document editor container** provides the main document view area along with the built-in toolbar and properties pane.

![Syncfusion Document Editor Container](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Syncfusion-Document-Editor-Container.png)<figcaption>Syncfusion Document Editor Container</figcaption>

## Features of Word Processor

- Compose Word documents.
- View or edit existing Word documents.
- Print Word documents.
- Find and replace.
- Spell checking.
- Track changes.
- Add, edit, or delete comments.
- Copy and paste content from other applications.
- Protect the entire Word document or a particular range of the document.
- Render right-to-left (RTL).
- View in print layout (page-by-page view) or web layout.
- Customize toolbar and context menu.
- Format text, paragraphs, and tables.
- Style characters and paragraphs. Add custom styles.
- Bullets and numbering.
- Hyperlinks.
- Bookmarks.
- Page setup.
- Headers and footers.
- Footnote and endnote.
- Legacy form fields.
- Tables of contents.
- Page numbers.

| This component requires server-side interaction for these operations:

· Opening Word documents (converting Word to SFDT file format)
· Pasting with formatting
· Restricting editing
· Spell checking

A server-side Web API can be created using [ASP.NET MVC](https://en.wikipedia.org/wiki/ASP.NET_MVC "Link to ASP.NET MVC Wikipedia page") and [ASP.NET Core](https://en.wikipedia.org/wiki/ASP.NET_Core "Link to ASP.NET Core Wikipedia page"). Access the [Document Editor Web API service projects from GitHub](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices "Link to Document Editor Web service demo on GitHub").

Also, you can directly pull and consume our predefined [Word Processor server Docker image](https://hub.docker.com/r/syncfusion/word-processor-server "Link to Syncfusion Word Processor Server on Docker hub") from Docker Hub. This server-side Web API project is targeting [ASP.NET Core 2.1](https://dotnet.microsoft.com/download/dotnet/2.1 "Link to download .NET Core 2.1").

At present, Syncfusion Word Processor performs spell checking for an entire document’s content for only one language at a time. The spell checker identifies the language through the [languageID](https://ej2.syncfusion.com/angular/documentation/api/document-editor/spellChecker/#languageid "Link to languageID property of Angular Word Processor") property. Whereas you can add multiple language dictionaries in the server-side Web API. Then, switch the languageID in client-side to different languages.

## Host Word Processor Web API from Docker Hub image

The [Angular Word Processor](https://www.syncfusion.com/angular-ui-components/angular-word-processor "Link to Angular Word Processor") component facilitates a predefined [Word Processor server Docker image](https://hub.docker.com/r/syncfusion/word-processor-server "Link to Syncfusion Word Processor Server on Docker hub"). This image contains all the mandatory web APIs for opening Word documents, pasting with formatting, restricting editing, spell checking, and saving documents. You can pull this Docker image and deploy it directly in your server on the go.

If you want to add new functionality or customize any existing functionalities, create your own Docker file by referencing the existing [Word Processor Docker project](https://github.com/SyncfusionExamples/WordProcessor_Server "Link to Word Processor web service project for Docker on GitHub").

To get started, you should [download and install Docker](https://docs.docker.com/get-started/#download-and-install-docker "Link to Download and install Docker documentation") in your environment. Then, perform the following steps in the command prompt:

**Step 1:**  First, pull the [Word Processor server Docker image](https://hub.docker.com/r/syncfusion/word-processor-server "Link to Syncfusion Word Processor Server on Docker hub") from Docker Hub.

| `docker pull syncfusion/word-processor-server` |

The following screenshot illustrates the command line output of this docker pull command.

![Output of docker pull command](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Output-of-docker-pull-command.png)<figcaption>Output of docker pull command</figcaption>

**Step 2:**  Then, create the **docker-compose.yml** file with the following code in your file system.

```cmd
version: '3.4' 

services: 
 word-processor-server: 
    image: syncfusion/word-processor-server:latest 
    environment: 
      #Provide your license key for activation
      SYNCFUSION_LICENSE_KEY: LICENSE_KEY
      
    volumes: 
      - C:\Docker\Data:/app/Data 
    ports:
    - "6002:80"
```

All the files present in the folder path (C:\Docker\Data) in the volumes section of the **docker-compose.yml** file will be copied to the proper folder (/app/Data) of the Docker container. The Word documents copied to the Docker container can be processed using the **LoadDocument** web API. Please refer to the [Word Processor server documentation](https://hub.docker.com/r/syncfusion/word-processor-server "Link to Syncfusion Word Processor server on Docker documentation") to configure spell check dictionaries for multiple languages.

**Note:** Word Processor is a commercial product. It requires a valid [license key](https://help.syncfusion.com/common/essential-studio/licensing/licensing-faq/where-can-i-get-a-license-key "Link to get Syncfusion license key") to use it in a production environment. Please replace **LICENSE\_KEY** with the valid license key in the **docker-compose.yml** file.

The following screenshot illustrates the folder in your file system containing the **docker-compose.yml** file.

![The Folder with docker-compose.yml](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/The-Folder-with-docker-compose.yml_.png)<figcaption>The Folder with docker-compose.yml</figcaption>

**Step 3:** In a terminal tab, navigate to the directory where you’ve placed the docker-compose.yml file. Then, execute the following command.

| `docker-compose up` |

![Output of docker-compose up Command](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Output-of-docker-compose-up-Command.png)<figcaption>Output of docker-compose up Command</figcaption>

Now, the Word Processor server Docker instance runs successfully in the localhost with the provided port number (http://localhost:6002). You can see the new Docker container running in your Docker dashboard window.

Refer to the following screenshot.

![New Docker Container Running in Docker Dashboard](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/New-Docker-Container-Running-in-Docker-Dashboard.png)<figcaption>New Docker Container Running in Docker Dashboard</figcaption>

Open this link in a browser. Then, navigate to the Word Processor web API (http://localhost:6002/api/documenteditor). You can see the default get method response.

![Browser Showing the Default get Method Response](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Browser-Showing-the-Default-get-Method-Response.png)<figcaption>Browser Showing the Default get Method Response</figcaption>

Use this URL (http://localhost:6002/api/documenteditor) as the service URL in the client-side Word Processor component.

## Create new Angular app with Word Processor component

To create an Angular app, please set up your environment with the following prerequisites:

- [Node.js](https://nodejs.org/en/ "Link to download Node.js")
- [Angular](https://angular.io/ "Link to Angular home page")
- [Angular CLI](https://github.com/angular/angular-cli "Link to Angular CLI demo on GitHib")
- [Visual Studio Code](https://code.visualstudio.com/download "Link to download Visual Studio Code") (or code editor of your choice)

Now, proceed in creating a new Angular app and integrate the Word Processor component using the following steps:

**Step 1:**  First, create a new Angular demo project. Please refer to the documentation for [creating a new Angular app in the local machine](https://angular.io/guide/setup-local "Link to Setting up the local environment and workspace documentation").

**Step 2:** After creating a new Angular app, install the Angular document editor NuGet package.

The following command installs Angular document editor and its dependent packages. The — **save ** command instructs the NPM to include the document editor package inside the dependencies section of the **package.json** file.

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

**Step 3:** In the **src/app/app.module.ts** file, add the import statement for **DocumentEditorContainerAllModule** from the installed package.

```js
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { DocumentEditorContainerAllModule } from '@syncfusion/ej2-angular-documenteditor';
import { AppComponent } from './app.component';

@NgModule({
       declarations: [
       AppComponent
        ],

imports: [
        BrowserModule,
        DocumentEditorContainerAllModule
       ],
       providers: [],
       bootstrap: [AppComponent]
})
export class AppModule { }
```

**Step 4:** In the **styles.css** file, reference the theme-specific CSS files that you prefer for document editor component. Here, we have referenced Material theme CSS files.

```js
@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';
```

**Step 5:** In the **src/app/app.component.html** file, add the document editor component by replacing the existing template content with the following script.

```html
<ejs-documenteditorcontainer [serviceUrl]='serviceLink' [enableSpellCheck]=true style="display:block" height="600"></ejs-documenteditorcontainer>
```

**Step 6:** In the **src/app/app.component.ts** file, declare the **serviceLink** property in the AppComponent class. Then, initialize it with the web API URL inside the constructor. This service URL will be used for the document editor’s server-side dependent functionalities.

Then, the modified **src/app/app.component.ts** file will be like the following.

```js
import { Component, ViewChild } from '@angular/core';
import { ToolbarService, DocumentEditorContainerComponent } from '@syncfusion/ej2-angular-documenteditor';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [ToolbarService]
})
export class AppComponent {
  public serviceLink: string;
  constructor() {
    this.serviceLink = 'http://localhost:6002/api/documenteditor/';
  }
}
```

Then, execute the project using the **ng server -o** command in the terminal window. Now, you will see the browser opens with the Word Processor component.

![Document Editor with Toolbar and Properties Pane](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Document-Editor-with-Toolbar-and-Properties-Pane.png)<figcaption>Document Editor with Toolbar and Properties Pane</figcaption>

In the previous output image, the Word Processor is added to the page without a title bar and doesn’t fit the full size of the browser window.

### Add title bar for Word Processor

**Step 1:** Add the following **div** element as the first line of the **src/app/app.component.html** file. Then, add the required styles in the [src/styles.css](https://github.com/SyncfusionExamples/View-and-edit-Word-document-in-Angular/blob/main/src/styles.css "Link to view and edit Word document in Angular demo on GitHub") file.

```html
<div id="default_title_bar" class="e-de-ctn-title"></div>
```

**Step 2:**  Then, define the **TitleBar** class as required or add the [title-bar.ts file from GitHub](https://github.com/SyncfusionExamples/View-and-edit-Word-document-in-Angular/blob/main/src/app/title-bar.ts "Link to view and edit Word document in Angular demo on GitHub").

**Step 3:**  Now, install the following packages used in the **src/app/title-bar.ts** file.

```cmd
npm install @syncfusion/ej2-angular-buttons -save
npm install @syncfusion/ej2-angular-splitbuttons -save
npm install @syncfusion/ej2-angular-navigations -save
```

**Step 4:** In the **src/app/app.component.html** file, add the template reference variable **documenteditor\_ref**  . Also, add the [created](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/#created "Link to created property of Angular Word Processor") and [documentChange](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/#documentChange "Link to DocumentEditorContainerComponent of Angular Word Processor") event handlers for the document editor component.

```html
<ejs-documenteditorcontainer #documenteditor_ref [serviceUrl]='serviceLink' [enableSpellCheck]=true (created)="onCreate()" (documentChange)="onDocumentChange()" style="display:block" height="600"></ejs-documenteditorcontainer>
```

**Step 5:** In the **src/app/app.component.ts** file, import the TitleBar class and create a new title bar instance. Then, attach it to the HTML **div** element.

```js
import { TitleBar } from './title-bar';
import { isNullOrUndefined } from '@syncfusion/ej2-base';

export class AppComponent {
  //Gets the DocumentEditorContainerComponent instance from view DOM using a template reference variable 'documenteditor_ref'.
  @ViewChild('documenteditor_ref') public container! : DocumentEditorContainerComponent;
  titleBar: TitleBar;
}

onCreate(): void {
  let titleBarElement: HTMLElement = document.getElementById('default_title_bar');
  this.titleBar = new TitleBar(titleBarElement, this.container.documentEditor, true);
  this.container.documentEditor.documentName = 'Getting Started';
  this.titleBar.updateDocumentTitle();
  //Sets the language id as EN_US (1033) for spellchecker and docker image includes this language dictionary by default.
  //The spellchecker ensures the document content against this language.
  this.container.documentEditor.spellChecker.languageID = 1033;
}

onDocumentChange(): void {
  if (!isNullOrUndefined(this.titleBar)) {
      this.titleBar.updateDocumentTitle();
  }
  this.container.documentEditor.focusIn();
}
```

Now, execute the project and you can see the browser opens with a title bar and document editor.

![Document Editor Container with Title Bar](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Document-Editor-Container-with-Title-Bar.png)<figcaption>Document Editor Container with Title Bar</figcaption>

### Fit Word Processor to browser window size

In the **src/app/app.component.ts** file, add logic to resize the document editor with respect to the window’s available size. Then, add an event listener for the browser window resize event.

Refer to the following code example.

```js
onCreate(): void {
  setInterval(()=>{
    this.updateDocumentEditorSize();
  }, 100);
  //Adds event listener for browser window resize event.
  window.addEventListener("resize", this.onWindowResize);
}

onDestroy(): void {
  //Removes event listener for browser window resize event.
  window.removeEventListener("resize", this.onWindowResize);
}

onWindowResize= (): void => {
  //Resizes the document editor component to fit full browser window automatically whenever the browser resized.
  this.updateDocumentEditorSize();
}

updateDocumentEditorSize(): void {
  //Resizes the document editor component to fit full browser window.
  var windowWidth = window.innerWidth;
  //Reducing the size of title bar, to fit Document editor component in remaining height.
  var windowHeight = window.innerHeight - this.titleBar.getHeight();
  this.container.resize(windowWidth, windowHeight);
}
```

Then, execute the project. Now, you can see the browser opens with a complete Word Processor including title bar, toolbar, properties pane and document editor in full window.

![Word Document Editor Fit to Full Window](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Word-Document-Editor-Fit-to-Full-Window.png)<figcaption>Word Document Editor Fit to Full Window</figcaption>

### Open a template document in Word Processor

You can open an existing Word document as a initial template using a [created](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/#created "Link to created property of Angular Word Processor") event.

In the **src/app/app.component.ts** file, add the following code to get SFDT for the specified template file. Then, open it in the Angular Word Processor component. The file name specified should be one of the files copied to the Docker container.

```js
//Opens the default template Getting Started.docx from web API.
openTemplate(): void {
  var uploadDocument = new FormData();
  uploadDocument.append('DocumentName', 'Getting Started.docx');
  var loadDocumentUrl = this.serviceLink + 'LoadDocument';
  var httpRequest = new XMLHttpRequest();
  httpRequest.open('POST', loadDocumentUrl, true);
  var dataContext = this;
  httpRequest.onreadystatechange = function () {
    if (httpRequest.readyState === 4) {
      if (httpRequest.status === 200 || httpRequest.status === 304) {
        //Opens the SFDT for the specified file received from the web API.
        dataContext.container.documentEditor.open(httpRequest.responseText);
      }
    }
  };
  //Sends the request with template file name to web API. 
  httpRequest.send(uploadDocument);
}
```

Then, execute the project. Now, you can see the browser opens with a complete Word Processor loaded with a template document.

![Document Editor Loaded with a Template Document](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Document-Editor-Loaded-with-a-Template-Document.png)<figcaption>Document Editor Loaded with a Template Document</figcaption>

## GitHub repository

For more information, refer to the complete, working [view and edit Word documents in Angular example](https://github.com/SyncfusionExamples/View-and-edit-Word-document-in-Angular "Link to view and Edit Word Document in Angular demo on GitHub").

## Summary

Thank you for taking time to read this blog. We have seen how to set up the [Angular Word Processor](https://www.syncfusion.com/angular-ui-components/angular-word-processor "Link to Angular Word Processor") server-side API using a predefined Docker image and integrate the component into an application. With this, you can easily view and edit a Word documents in your Angular app.

Also, take a moment to peruse the [documentation](https://ej2.syncfusion.com/angular/documentation/document-editor/ "Link to Angular Document Editor documentation"), where you’ll find other features, all with accompanying code examples.

Are you already a Syncfusion user? Then, you can download the product setup [here](https://www.syncfusion.com/account/downloads/studio/ "Link to license and download page of Essential Studio"). If you’re not yet a Syncfusion user, you can download a free, 30-day trial [here](https://www.syncfusion.com/downloads/fileformats/confirm "Link to the free evaluation of the Syncfusion Essential Studio for File Formats").

If you have any questions about these features, please let us know in the comments below. You can also contact us through our [support forum](https://www.syncfusion.com/forums/ "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/ "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/ "Link to Syncfusion Feedback Portal"). We are happy to assist you!

## Related blogs

- [Load and View PDF Files in an Angular App](https://dev.to/syncfusion/how-to-load-and-view-pdf-files-in-an-angular-app-bjb "Link to How to Load and View PDF Files in an Angular App blog")
- [Customize the Angular Tree Grid by Creating Reusable Components](https://dev.to/syncfusion/how-to-customize-the-angular-tree-grid-by-creating-reusable-components-213j "Link to How to Customize the Angular Tree Grid by Creating Reusable Components blog")
- [How to Customize the UI of the Angular Query Builder](https://dev.to/karthickramasamy08/how-to-customize-the-ui-of-the-angular-query-builder-54d2-temp-slug-4020231 "Link to How to Customize the UI of the Angular Query Builder blog")
- [Introducing the Syncfusion Web Projects Template for Visual Studio Code](https://dev.to/sureshmohan/introducing-the-syncfusion-web-projects-template-for-visual-studio-code-31hi-temp-slug-990551 "Link to Introducing the Syncfusion Web Projects Template for Visual Studio Code blog")