app.component.ts

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

declare const TXTextControl: any;
declare const loadDocument: any;
declare const loadJsonData: 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() {
    
    var jsonData = '[{"Id":1,"Name":"Invoice","Orders":[{"Id":1,"OrderItems":[{"Id":1,"Qty":5,"Product":{"Id":1,"Name":"TX Spell .NET","Description":"Spell checking component","Available":true,"Price":249.56,"Serial":"AA6765653"},"Price":200.56},{"Price":4433.44}]}]}]';

    // wait until TXTextControl has been loaded
    TXTextControl.addEventListener("ribbonTabsLoaded", function() {
      loadJsonData(jsonData);
    });
  }
  
}