The Angular version of the TX Text Control editor is loading asynchronously when added to an HTML view. That implies that the TXTextControl JavaScript object is not immediately available. An event cannot be attached to this object directly as the object doesn't exist on initializing the app.

The txDocumentEditorLoaded Event

With the latest version 28.3.0, the Angular document editor received a new event that is fired when TXTextControl is available.

After this event is fired, the object TXTextControl exists in the DOM and can be used. In the following code, the event is used to attach the textControlLoaded event that is fired, if TX Text Control is ready to be used.

import { Component, HostListener } from '@angular/core';

declare const TXTextControl: any;
declare const loadDocument: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  
  // attach the txDocumentEditorLoaded event in the @HostListener decorator
  // https://angular.io/api/core/HostListener

  @HostListener('document:txDocumentEditorLoaded', ['$event'])
  onTxDocumentEditorLoaded() {
    
    // wait until TXTextControl has been loaded
    TXTextControl.addEventListener("textControlLoaded", function() {
      loadDocument("<strong>Hey! It compiles! Ship it!</strong>");
    });
  }
  
 }

In this event handler, the document is finally loaded using the following JavaScript function loadDocument:

function loadDocument(html) {
    TXTextControl.loadDocument(TXTextControl.streamType.HTMLFormat, btoa(html));
}

This new event helps to interact with TX Text Control on initializing the app which is very helpful when TX Text Control should be initialized with a loaded document on loading the app.

Test this on your own by creating a trial access token. No download required to evaluate TX Text Control for Angular.