In many cases, the Angular version of the document editor is used in combination with an ASP.NET Core backend. The backend provides the data source for the merge process and also provides the endpoints to perform the actual document merge with the created template and live data.

In this example, an endpoint is implemented in the backend to return a JSON string that is used to populate the drop-downs that list the available fields and merge blocks.

MailMerge in Angular

Filling the Drop-Down Menus

The GetJsonData endpoint does nothing more than load a JSON text file and return it.

[HttpGet]
[Route("GetJsonData")]
public MailMergeData GetJsonData()
{
var mailMergeData = new MailMergeData();
string json = System.IO.File.ReadAllText("App_Data/data.json");
mailMergeData.Json = json;
return mailMergeData;
}
view raw test.cs hosted with ❤ by GitHub

The MailMergeData class is implemented as an exchange object for all communication between the client and the backend endpoints.

public class MailMergeData
{
public string? Json { get; set; }
public string? Template { get; set; }
public string? Document { get; set; }
}
view raw test.cs hosted with ❤ by GitHub

In the Angular application, the endpoint is called in the ngOnInit method. When the Document Editor is loaded, the loadJsonData method is called with the loaded JSON string.

@HostListener('document:txDocumentEditorLoaded', ['$event'])
onTxDocumentEditorLoaded() {
// wait until TXTextControl has been loaded
TXTextControl.addEventListener("textControlLoaded", () => {
TXTextControl.loadJsonData(this.mailMergeData.json);
});
}
ngOnInit() {
this.getJsonData();
}
getJsonData() {
this.http.get<MailMergeData>('/mailmerge/getjsondata').subscribe(
(result) => {
this.mailMergeData = result;
}
);
}
view raw test.ts hosted with ❤ by GitHub

The same exchange object is implemented as an interface in TypeScript.

interface MailMergeData {
json?: string;
template?: string;
document?: string;
}
view raw test.ts hosted with ❤ by GitHub

Merging the Template

Once the user has completed the template, it can be merged server-side using the MergeTemplate Web API endpoint.

[HttpPost]
[Route("MergeTemplate")]
public MailMergeData MergeTemplate([FromBody] MailMergeData mailMergeData)
{
using (var tx = new TXTextControl.ServerTextControl())
{
tx.Create();
byte[] templateData = Convert.FromBase64String(mailMergeData.Template);
tx.Load(templateData, TXTextControl.BinaryStreamType.InternalUnicodeFormat);
var merge = new MailMerge
{
TextComponent = tx
};
merge.MergeJsonData(mailMergeData.Json);
byte[] documentData;
tx.Save(out documentData, TXTextControl.BinaryStreamType.InternalUnicodeFormat);
mailMergeData.Document = Convert.ToBase64String(documentData);
return mailMergeData;
}
}
view raw test.cs hosted with ❤ by GitHub

Clicking the Merge Template button saves the document in internal TX Text Control format and sends it to the Web API endpoint in an http post method.

mergeTemplate() {
TXTextControl.saveDocument(TXTextControl.StreamType.InternalUnicodeFormat, (document: any) => {
this.mailMergeData.template = document.data;
// send a post request to the server
this.http.post('/mailmerge/mergetemplate', this.mailMergeData).subscribe(
(result) => {
this.mailMergeData = result;
TXTextControl.loadDocument(
TXTextControl.StreamType.InternalUnicodeFormat,
this.mailMergeData.document);
}
);
});
}
view raw test.ts hosted with ❤ by GitHub

The server returns the final document, which can be loaded into the Document Editor using loadDocument.

This project is available for you to download and test on your own from our GitHub repository.

Conclusion

Using the Angular version of the Document Editor in combination with an ASP.NET Core backend is a powerful combination to create a mail merge application. The backend provides the data source for the merge process and also provides the endpoints to perform the actual document merge with the created template and live data.