We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to get started easily with Syncfusion Angular 11 Word Processor?

Platform: Angular - EJ 2 |
Control: DocumentEditor

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 11 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 11 application:

 

Installation and application creation

 

  1. Install Angular cli 11 using the following command.

 

  1. npm install -g @angular/cli@11.2.3

 

Note:

To follow and run the application in Angular 6, Angular 5, or Angular 4, you should replace the CLI command version number with corresponding Angular version number.

 

npm install -g @angular/cli@<CLI VERSION>

 

 

  1. Create Angular 11 application using Angular CLI.

 

  1. ng new angular11-app
  2. cd angular11-app

 

  1. Serve the Angular 11 application using below command.

 

  1. ng serve

 

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

 

Angular_app

 

 

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.

 

  1. npm install @syncfusion/ej2-angular-documenteditor --save
  2. npm install @syncfusion/ej2 save

 

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

 

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

 

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

 

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

 

           <ejs-documenteditorcontainer></ejs-documenteditorcontainer>

 

  1. 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/';

  }

}

 

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

 

  1. Now, serve the application using following command.

 

  1. ng serve open

 

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

The following screenshot explains this.

WPC_app

 

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 WordProcessor 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!

 

2X faster development

The ultimate Angular UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile