Enabling Two Way Data Binding Across Multiple DOCX Files in Angular DocumentEditor

[Mahmoud Kandil Ahmed]

Hello Syncfusion Team, We’re currently using the Angular DocumentEditor (via Essential JS 2) in conjunction with a .NET Core backend. Specifically, we utilize the Mail Merge demo (https://ej2.syncfusion.com/angular/demos/#/material3/document-editor/mail-merge) as the foundation of our document editing and generation workflow. Our requirement: We have three separate DOCX files representing, for example, Invoice, Shipping, and Terms. Certain fields—such as InvoiceNumber, ShipAddress, etc.—must stay in sync across all three documents. If one document’s field is changed (either by user input in the DocumentEditor UI or via backend processing), the corresponding fields in the other two documents must automatically update. Essentially, we need something akin to two-way data binding across multiple Word files. Questions: Is this scenario achievable using the Angular DocumentEditor + DocIO stack? Can DocumentEditor expose merge fields dynamically and support synchronized updates between multiple documents? Are there APIs to detect field changes and push updates to other documents? What overall strategies or architecture patterns would you recommend to implement this? Should we rely on the client side (Angular) to manage real-time sync and then push updates to the backend for doc generation? Or is there a feature in DocIO (e.g., via mail merge events, bookmarks, ReplaceContent API) that allows merging the contents of one document into another dynamically after edits? Could you provide a minimal code sample or demo showing: How to detect or intercept field edits in the Angular DocumentEditor (e.g., using insertField, editorChange, etc.). How to handle synchronization on the backend, e.g., identifying which fields changed, applying those across multiple DOCX using DocIO. If applicable, how to leverage features like multiple data sources, bookmarks mapping, or document merging to support this flow. Context and Tech Stack: Goal: Synchronized changes to key fields across three interlinked Word templates, with minimal duplication and real-time consistency We’d greatly appreciate your guidance—whether that's confirmation of feasibility, recommended workflows or patterns, or a sample/demo for this use case. Thank you for your support and expertise!

[Mohammed Affan Saqib Hussain]

Hi Mahmoud Kandil Ahmed,

We are currently reviewing your query and will provide an update by 20 August, 2025.

Regards,

Mohammed Affan C

[Mohammed Affan Saqib Hussain]

Hi Mahmoud Kandil Ahmed,

Could the Document Editor be enhanced to dynamically expose merge fields and enable synchronized updates across multiple documents?

Currently, for the mail merge functionality, we utilize the Syncfusion DocIO library. Once the mail merge is completed, the merge fields are converted into standard text, making it impossible to identify the original merge fields and their associated values within the Document Editor.

"If applicable, could you clarify how to utilize features such as multiple data sources, bookmarks mapping, or document merging to facilitate this workflow?"

We kindly request you to elaborate on your requirements regarding the above statement. Additionally, please provide comprehensive details about your specific needs and the workflow of the sample. This information will help us better understand your exact requirements and provide you with further insights.

As part of our preparation, we have developed a sample application that demonstrates a potential approach to meet your requirements. In this sample, we open a document in the Document Editor and send it to the server for mail merging. Subsequently, we open two additional documents (MailMerge2 and MailMerge3), perform mail merging on them using the same data, and store the results locally. Please let us know if this solution aligns with your expectations.

Sample - https://stackblitz.com/edit/f8pw6chd?file=index.ts

Server Code Snippet:

[AcceptVerbs("Post")]
        [HttpPost]
        [EnableCors("AllowAllOrigins")]
        [Route("MailMerge")]
        public string MailMerge([FromBody] ExportData exportData)
        {
            try
            {
                // 1. Mail merge on the incoming document
                byte[] data = Convert.FromBase64String(exportData.documentData.Split(',')[1]);
                using MemoryStream inputStream = new MemoryStream(data);
                using WDocument uploadedDoc = new WDocument(inputStream, Syncfusion.DocIO.FormatType.Docx);

                uploadedDoc.MailMerge.RemoveEmptyGroup = true;
                uploadedDoc.MailMerge.RemoveEmptyParagraphs = true;
                uploadedDoc.MailMerge.ClearFields = true;
                uploadedDoc.MailMerge.Execute(CustomerDataModel.GetAllRecords());

                // Convert to SFDT and return
                using MemoryStream outputStream = new MemoryStream();
                uploadedDoc.Save(outputStream, Syncfusion.DocIO.FormatType.Docx);
                outputStream.Position = 0;

                var document = Syncfusion.EJ2.DocumentEditor.WordDocument.Load(outputStream, Syncfusion.EJ2.DocumentEditor.FormatType.Docx);
                string sfdtText = Newtonsoft.Json.JsonConvert.SerializeObject(document);
                document.Dispose();

                // 2. Mail merge on Document1.doc and save back
                string doc1Path = Path.Combine("App_Data", "MailMerge2.docx");
                using FileStream doc1Stream = new FileStream(doc1Path, FileMode.Open, FileAccess.ReadWrite);
                using WDocument doc1 = new WDocument(doc1Stream, Syncfusion.DocIO.FormatType.Docx);
                doc1.MailMerge.Execute(CustomerDataModel.GetAllRecords());
                doc1Stream.SetLength(0); // Clear existing content
                doc1.Save(doc1Stream, Syncfusion.DocIO.FormatType.Docx);

                // 3. Mail merge on Document2.doc and save back
                string doc2Path = Path.Combine("App_Data", "MailMerge3.docx");
                using FileStream doc2Stream = new FileStream(doc2Path, FileMode.Open, FileAccess.ReadWrite);
                using WDocument doc2 = new WDocument(doc2Stream, Syncfusion.DocIO.FormatType.Docx);
                doc2.MailMerge.Execute(CustomerDataModel.GetAllRecords());
                doc2Stream.SetLength(0); // Clear existing content
                doc2.Save(doc2Stream, Syncfusion.DocIO.FormatType.Docx);

                return sfdtText;
            }
            catch (Exception ex)
            {
                return ex.Message;
            }
        }

Regards,

Mohammed Affan C

Attachment: ASP.NET_Core_Web_Service_Multi_Mail_merge_d23d0f65.zip