test.ts

import { Component, HostListener, OnInit} from '@angular/core'; 
import { HttpClient } from '@angular/common/http'; 
import { CommonModule } from '@angular/common'; 
import { RouterOutlet } from '@angular/router'; 
import { DocumentEditorModule } from '@txtextcontrol/tx-ng-document-editor'; 

declare const TXTextControl: any; 

@Component({ 
  selector: 'app-root', 
  standalone: true, 
  imports: [CommonModule, RouterOutlet, DocumentEditorModule], 
  templateUrl: './app.component.html', 
  styleUrl: './app.component.css' 
}) 

export class AppComponent implements OnInit { 
  title = 'my-editor-app'; 
  newGroupHtml: string = ''; 

  constructor(private http: HttpClient) {} 

  ngOnInit() { 
    //Load new group HTML on component initialization. 
    this.loadNewGroupHtml().subscribe(html => { 
      this.newGroupHtml = html; 
    }); 
  } 
 
  //Add ribbon modifications when TX Document Editor is loaded. 

  @HostListener('document:txDocumentEditorLoaded') 
  onTxDocumentEditorLoaded() { 
    TXTextControl.addEventListener("ribbonTabsLoaded", () => { 
      this.addNewGroup(); 
    }); 
  } 

  //Retrieve new group HTML from the server. 

  loadNewGroupHtml() { 
    return this.http.get('/new-group.html', { responseType: 'text' }); 
  } 

  //Dynamically insert a new button group into the ribbon. 

  addNewGroup() { 
    const newButtonGroup = document.getElementById('ribbonGroupFont'); 
    if (newButtonGroup && this.newGroupHtml) { 
      newButtonGroup.insertAdjacentHTML('beforebegin', this.newGroupHtml); 
    } else { 
      alert('Symbols group container not found or HTML not loaded.'); 
    } 
  }