How to get started with Syncfusion Angular 8 WordProcessor component?

The Essential JS 2 Angular Word Processor is a component that have editing capabilities like Microsoft Word. It is also known as document editor, and it is used to create, edit, view, and print the Word documents. It provides all the common Word processing features including editing text, formatting contents, resizing image and tables, finding and replacing text, bookmarks, tables of contents, printing, and importing and exporting Word documents. This article explains how to easily integrate Syncfusion Angular Word Processor in Angular 8 application and how to enable its commonly used features using services.

Prerequisites

Before start, the following items are required to create Angular Word Processor in Angular 8 application:

• Node.js (latest version)
• Angular 8
• Angular CLI
• Visual Studio code for editor

Installation and application creation

1. Install Angular cli 8 using the following command.

    npm install -g @angular/cli@8.1.1
   

2. Create an Angular 8 application using Angular cli.

         ng new angular8-app
         cd angular8-app
   

3. Serve the Angular 8 application using the following command.

          ng serve
   

Listen the application in localhost:4200. Your application will serve in the browser as follows.

Integration of Angular Word Processor a.k.a Document Editor

1. After running the Angular 8 application successfully, configure the Angular Document Editor in this application. Install Angular Document Editor and EJ2 package using the following command. The —save command will instruct the NPM to include a document editor package inside the dependencies section of the package.json.

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

2. Import DocumentEditorContainerAllModule from installed package in app/app.module.ts.

   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 { }
   

3. You should refer to the CSS file for Angular Document Editor in style.css     

   @import "../node_modules/@syncfusion/ej2/material.css";
   

4. Add the Angular Document Editor component in app.component.html.

              <ejs-documenteditorcontainer></ejs-documenteditorcontainer>
   

5. Now, define the service URL for this Document Editor in app.component.ts. Service URL is required for opening a Word document (Refer to https://ej2.syncfusion.com/angular/documentation/document-editor/import/?no-cache=1#convert-word-documents-into-sfdt )

   import { Component, ViewChild } from '@angular/core';
   import { ToolbarService } from '@syncfusion/ej2-angular-documenteditor';
    
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css'],
     providers: [ToolbarService]
   })
   export class AppComponent {
     title = 'angular7-app';
     public serviceLink: string;
     ngOnInit() {
       //Service URL is required for opening word documents in DocumentEditor
       //Documentation link: https://ej2.syncfusion.com/angular/documentation/document-editor/import/?no-cache=1#convert-word-documents-into-sfdt
       this.serviceLink = 'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/';
     }
   } 
   

6. After defining service link, define Document Editor’s serviceUrl in app.component.html.

   <ejs-documenteditorcontainer #documenteditor_default [serviceUrl]='serviceLink' style="display:block;height:600px"></ejs-documenteditorcontainer>
   

7. Now, serve the application using following command.

    ng serve --open
   

After all the files are compiled successfully, it will serve the site at localhost:4200

The following screenshot explains this.

Summary

      Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!