How to get started easily with Angular Word Processor?

The Essential® JS 2 Angular Word Processor is a component that has editing capabilities similar to Microsoft Word. It is also known as a document editor, and it is used to create, edit, view, and print Word documents. It provides all the common Word processing features, including editing text, formatting content, resizing images 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 into an Angular 11 application and how to enable its commonly used features using services.

Prerequisites

Before starting, the following items are required to create an Angular Word Processor in an Angular 11 application:

• Node.js (latest version)
• Angular 11
• Angular CLI
• Visual Studio Code for Editor

Installation and application creation

1. Install Angular cli 11 using the following command.

npm install -g @angular/cli@11.2.3

2. Create Angular 11 application using Angular CLI.

• ng new angular11-app
• cd angular11-app

3. Serve the Angular 11 application using below command.

  ng serve

4. Listen to the application at localhost:4200. Your application will serve in the browsers as follows.

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

1. After running the Angular 11 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://services.syncfusion.com/angular/production/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

In this GitHub repository, the application prepared from the previous steps has been committed, and it is readily runnable. Also, you can check Syncfusion® Angular Word Processor a.k.a DocumentEditor features from this page.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through Syncfusion® Support forum or Direct-Trac. We are happy to assist you!

Conclusion

We hope you enjoyed learning about how to get started with Angular 11 Word Processor. You can refer to our Angular Word Processor feature tour page to learn about its other groundbreaking features representations documentation and how to quickly get started with configuration specifications.  You can also explore our Angular Word Processor example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!