Hi everyone, welcome to this
video tutorial on how to create an Angular application and
configure the Angular Word Processor component in it. Using the Angular Document
Editor or Word Processor component you can create, edit,
view and print Word documents. The key features are open and
save documents, insert tables, images, bookmarks, shapes and so
on. To explore the other features
available in the Syncfusion Angular Word Processor
component, refer to the website link shown in the above YouTube
card. I will show you how to configure
a few of its basic features like enabling toolbar, opening and
saving documents. Let's start with the application
creation process. First, I initialize my app using
the Angular CLI. I will use VS Code as the editor
and show the output in the Chrome browser. In VS Code, I install the CLI
tool globally using the command npm install global angular CLI. Then I create a new angular
project using the ng new command and provide the app name
myangularproject. I am asked to add angular
routing and enter No. Then choose CSS as the style sheet
format. I navigate to the location where
my new project has been created. To start using the Word
Processor component, install the Syncfusion document editor
package using the command ng add Syncfusion EJ2 Angular document
editor. Before going any further, I need
to register the Angular Trial license key. I open the main dot ts file and
import the register license method from the Syncfusion EJ2
base package. Using this method, I register
the Angular trial license key. From 2022 volume one release, the trial license key is
mandatory for Angular products to avoid a licensing warning. To see where to generate a trial
license key, check the video description below. Next, I navigate to the app
module file where the Document editor module and Document
editor container module have been imported from the
Syncfusion EJ2 Angular Document Editor package and registered in
the imports array of the Ng module. Then I navigate to the styles
dot CSS file where the EJ2 Material theme CSS reference for
Syncfusion Angular controls can be found. In the app.component.
HTML file, I replace the default code snippets with the division
element which act as a wrapper for the component, then add ejs
document editor container tag. To add custom height, I set the
height property to 590 pixels. Let me run this application
using the command ng serve. Look here. The Word Processor is rendered
with a properties pane and I can write any content. Here you will find options to
format the text. I'll change the font size and
apply the style to italic. These options are used to format
paragraphs. I apply the heading one style to
the title and align the heading to center. Next, let me show you how to
enable a toolbar with predefined options. First, I navigate to the app
module file, import the toolbar service from the Syncfusion EJ2
Angular document editor package and inject it into the
provider's array of the Ng module. See, the Word Processor is
rendered with a toolbar. The toolbar has options to
include an image, table, link, comment and so on. You can hide or show the
property panel by clicking this toggle button. Here I insert the image by
clicking the image button. Click Upload from computer and
select the image. I include a table by clicking
this button, provide the number of rows and columns to insert
the table and type the table content. Just like a Word document, I
insert a comment by clicking this comments option. Here I provide the comment
details. These are some limited Word
Processor features from the toolbar options. But there are other toolbar
options like Microsoft Word. Let me show you a few important
ones. You can add a header and a
footer to a document. You can design form fields and
protect the document from unintentional editing. You can also add the table of
contents like this, Track changes and Accept or reject changes
made to the document. Using the Merge Document toolbar
option, you can perform mail merge operations. I will explain these features in
detail in my upcoming videos. Meanwhile, you can explore them
on the demo page linked in the card above. Now I will show you how to save
a document from the Word Processor. I hold the control key and press
the S key to save. As you can see, the Word
document is saved on my machine. Notice the saved document format
is Syncfusion Document Text Format SFDT and this format can
be only viewed using the Syncfusion Word Processor component. You don't need to write any
explicit code to open or save the SFDT format file. So click the Open button from
the toolbar and select the SFDT document to be imported. So far I showed you how to open
and save SFDT documents. Next I'll show you how to save a
document in docX format using an external button click. For that I am going to use
Syncfusion Angular button component. So I install the Syncfusion
angular buttons package by running the command Ng add
syncfusion EJ2 angular buttons in the app module file. See the button module imported
from the Syncfusion EJ2 angular buttons package and
injected into the imports array of the Ng module and add the ejs button attribute with the
content save. As I said before I want to save
the document when a button is clicked so I add the event click
and assign the callback method on save. I define this method in the app
component file. To access the built in methods of the document
editor container. I add the reference variable to
the component and import the view child from the angular core
package and declare a variable editor object to create a
document editor instance. I use the editor object instance
to call the document editor save method. Now I need to pass two arguments
file name and its format type. I pass the name as
Sampledocument and choose type as docx. Now when I click the save
button, the document will be saved in the docx format. Finally, I will show you how to
import this docx file using the service URL. To do that, I add the service
URL property and assign the hosted URL link of the server
project. Let me open the GitHub location
of the server side project which has the import API. In the document editor
controller, the import method is used to open the docx file. Apart from this import method,
this controller has a few other methods to paste the clipboard
format, Restrict editing to save a file format other than SFDT
and docx and check the spelling. Let's see the import method in
detail now. Here the memory stream is used
to store data in bytes. Based on the document input, the
document type is identified and copied to the stream. The load method of a Word
document will be used to convert the stream byte array into a
Word data format. Then the Word data will be
converted into a JSON object and returned to the client side. Using this method you can also
import EMF and WMF images. You can download the GitHub
location of the document editor controller from the link shared
in the description below. Click the Open button from the
toolbar and select the docx file to be imported. Check now the docx file is open. In this video, I have shown you
how to create and configure the Syncfusion Angular Word
Processor component using the Angular CLI tool and how to use
a few of its basic features. You can download this working
example from the GitHub link in the description below. I've also shared a link where
you can learn about obtaining a free license key to use our
Angular products if you're eligible for our community
license. Thank you for watching this
video. If you found it useful, please
give it a like and subscribe to our channel Play song.
