Angular - Add an attribute to element based on it's class name

hmm, if you don't have an access to the HTML, it becomes a little bit difficult and ugly :(.

Here is the workaround in typescript(But please if you can avoid of doing this will be much better):

put the HTML in the wrapper div

<div #pureHTMLRef> 
   <!-- your HTML piece goes here -->
</div

Component

export class Component implements AfterViewInit {
  
  @ViewChild('pureHTMLRef') htmlContainer: ElementRef<HTMLElement>;

  ngAfterViewInit() {
     this.addTooltipToUIElements();
  }

  addTooltipToUIElements() {
      const container = htmlContainer.nativeElement;
      const uiElement = container.querySelectorAll('[class~=ui-]'); // select all elements that is containing `ui-`
      uiElement.forEach(element => {
        const class = [...element.classList].find(class => class.includes('ui-', 0));
        if(!class) { return; }
        const name = class.replace('ui-', '').replace('-', ' ');
        element.setAttribute('tooltip', this.toTitleCase(name));
      })

  }

  toTitleCase(str) {
   return str.replace(
     /\w\S*/g,
     function(txt) {
      return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
     }
  );

}