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.

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;
}

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; }
}

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;
    }
  );
}

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

interface MailMergeData {
  json?: string;
  template?: string;
  document?: string;
}

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;
    }
}

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);
      }
    );

  });
}

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.