The Angular Document Editor can be used completely independent of a server-side backend, so you will need to use JavaScript to load and save documents. However, in most cases, documents are stored in a backend application that also provides the endpoints for accessing data such as documents.

Asynchronous Loading

This sample application shows how to provide the endpoints to retrieve and save documents, and how to load them into the Angular Document Editor. The following screen video shows the example of displaying a list of documents with buttons to load the selected document into the editor.

The Angular Document Editor is a component that can be used to display and edit documents in Angular applications. The editor can be used to load and save documents from and to the server. The editor is part of the TX Text Control Angular package that can be installed via npm.

Retrieving a List of Documents

The Web API controller is implemented in the ASP.NET Core backend application. The controller provides the endpoints to load and save documents and to return a list of available documents.

The following code shows the Web API controller that returns documents stored in the App_Data folder:

[HttpGet]
[Route("List")]
public IEnumerable<DocumentData> List()
{
  // file all file names from App_Data
  var files = Directory.GetFiles("App_Data");
  var data = new List<DocumentData>();
  foreach (var file in files)
  {
    data.Add(new DocumentData
    {
      Name = Path.GetFileName(file),
    });
  }
  return data;
}

The transport object used that is serialized to JSON is the DocumentData class. The following code shows the DocumentData class that is used to transfer the document data between the client and the server:

public class DocumentData
{
        public string Data { get; set; }
        public string Name { get; set; }
}

This interface is also defined in Angular:

interface DocumentData {
  data: string;
  name: string;
}

On initialization, this endpoint is called to fill the array of DocumentData documentList.

export class AppComponent implements OnInit {

  // public array of DocumentData
  public documentList: DocumentData[] = [];
  public selectedDocument: DocumentData | undefined;
  
  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.getFilenames();
  }

  getFilenames() {
    this.http.get<DocumentData[]>('/document/list').subscribe(
      (result) => {
        this.documentList = result;
      },
      (error) => {
        console.error(error);
      }
    );
  }
}

The documentList array is used to display the list of documents. The following code shows the Angular component that displays the list of documents:

<h1 id="tableLabel">Document List</h1>

<td *ngIf="selectedDocument">
  <button (click)="saveDocument(selectedDocument.name)">Save</button>
</td>

<p *ngIf="!documentList"><em>Loading... Please refresh once the ASP.NET backend has started.</em></p>

<div class="container">
  <table *ngIf="documentList">
    <thead>
      <tr>
        <th>Name</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let document of documentList">
        <td>{{ document.name }}</td>
        <td>
          <button (click)="loadDocument(document.name)">Load</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<div class="container container-70">

  <tx-document-editor width="800px"
                      height="600px"
                      webSocketURL="wss://localhost:7125/TXWebSocket"
                      [editMode]="selectedDocument === undefined ? 'ReadOnly' : 'Edit'">
  </tx-document-editor>

</div>

When the user clicks a Load button, the selected document name is passed to the endpoint to retrieve the document data from the backend. As you can see in the screenshot, the Save button is only displayed when a document is selected.

Loading a Document

The following code shows the server-side Load Controller that returns the selected document data.

[HttpGet]
[Route("Load")]
public DocumentData Load(string name)
{
  // load the file from App_Data
  var file = Path.Combine("App_Data", name);
  var data = new DocumentData
  {
    Name = name,
    Data = Convert.ToBase64String(System.IO.File.ReadAllBytes(file)),
  };
  return data;
}

On the Angular side, the returned document is then loaded into the document editor with the appropriate StreamType, which is determined by the filename extension.

loadDocument(name: string) {
  // Call HTTP GET with the name of the document as a query parameter
  this.http.get<DocumentData>('/document/load', {
    params: {
      name: name
    }
  }).subscribe(
    (result) => {
      this.selectedDocument = result;

      let streamType = TXTextControl.StreamType.InternalUnicodeFormat;

      switch (this.selectedDocument.name.split('.').pop()) {
        case 'docx':
          streamType = TXTextControl.StreamType.WordprocessingML;
          break;
        case 'rtf':
          streamType = TXTextControl.StreamType.RichTextFormat;
          break;
        case 'doc':
          streamType = TXTextControl.StreamType.MSWord;
          break;
      }

      TXTextControl.loadDocument(streamType, this.selectedDocument.data, () => {
        TXTextControl.setEditMode(1);
      });
    },
    (error) => {
      console.error(error);
    }
  );
}

Saving a Document

When the user clicks the Save button, the document is saved back to the server. The following code shows the server-side Save Controller that saves the document data.

[HttpPost]
[Route("Save")]
public bool Save([FromBody] DocumentData documentData)
{
        // save the file to App_Data
        var file = Path.Combine("App_Data", documentData.Name);
        System.IO.File.WriteAllBytes(file, Convert.FromBase64String(documentData.Data));
        return true;
}

The document data is passed to the server and saved to the App_Data folder. The following code shows the Angular component that sends the document data to the server. The saveDocument method of the TX Text Control is used to save the document in the appropriate format as a base64-encoded string.

saveDocument(name: string) {

  let streamType = TXTextControl.StreamType.InternalUnicodeFormat;

  switch (this.selectedDocument?.name.split('.').pop()) {
    case 'docx':
      streamType = TXTextControl.StreamType.WordprocessingML;
      break;
    case 'rtf':
      streamType = TXTextControl.StreamType.RichTextFormat;
      break;
    case 'doc':
      streamType = TXTextControl.StreamType.MSWord;
      break;
  }

  TXTextControl.saveDocument(streamType, (document: any) => {
    if (this.selectedDocument) {
      this.selectedDocument.data = document.data;

      // Send a POST request to the server
      this.http.post('/document/save', this.selectedDocument).subscribe(
        (result) => {
          alert("Document saved successfully");
          this.getFilenames();
        }
      );
    }
  });
}

Conclusion

This article showed how to load and save documents in an Angular Document Editor using an ASP.NET Core Web API asynchronously. A Web API is used to load and save documents from and to the server and the Angular Document Editor is used to display and edit the documents.

The sample project is available on GitHub.

Download the sample project and test it on your own. Should you have any inquiries or require further assistance, please do not hesitate to reach out to us. We're here to help!.

Happy coding!