TX Text Control for Angular provides visual components to edit and view documents in Angular based applications. The document editor can be used to edit and create MS Word compatible documents in a true WYSIWYG manner.

A very common use-case scenario is using the Angular editor in combination with an ASP.NET (Core) backend to merge data into created templates.

A full tutorial on how to create a new ASP.NET Core back-end Web Application with an Angular front-end SPA can be found here:

Angular Applications with an ASP.NET Core Back-End

Typical Workflow

The following illustration shows the typical workflow:

TX Text Control Workflow

In a common use-case, document templates with placeholder merge fields are created using the document editor in your Angular application.

Call the Web API

A TX Text Control powered Web API is called in TypeScript by passing the template to the backend (->). After a successful merge, the returned document is loaded back into the document editor.

Loading...

The JavaScript function saveDocument saves the content of the document editor and loadDocument loads back a returned document:

Loading...

Backend Controller

In the backend controller, the template is merged with data server-side and returned to the client (<-).

Loading...

Loading into DocumentViewer

Instead of loading the resulting document into the document editor, it can be presented in the read-only document viewer. In the following implementation of the mergeDocument method, the returned document is loaded into the document viewer instead the editor:

Loading...

To learn more details on how to load documents into the document viewer from an ASP.NET Core backend Web API, please have a look at the following article:

Loading Documents from an ASP.NET Core Backend Web API