Cannot get angular datatables th

Question

I've created a button on the title of columns, but the title has the 'sorting' class, that sorts the registers when i click my custom button. I want to create new div at title and move the class to the new div. But I have problems accessing to the element. I'm working with Angular, renderer2 method.

 let sorting = document.getElementsByClassName("sorting");
 let elements = this.renderer.selectRootElement(sorting);
console.log(
      "elements:",elements,
      "typeof:", typeof elements,
      "elements.item(0)", elements.item(0),
      "elements[0]:", elements[0],
      "elements.length:", elements.length,
      "elements.textContent:",elements.textContent,
      "elements.innerHTML:",elements.innerHTML)

sorting response htmlColection

I have tried in another way, but I end up with the same problem

this.renderer.selectRootElement(this.datatableElement['el'].nativeElement['childNodes']

sorting response nodelist

I've tried to go through the array using this methods, but i get void array in any case

Array.from(sorting);
[].slice.call(sorting);
[...sorting];

My component looks like this:

component look

I have put the buttons this form:

    let columns = this.renderer.selectRootElement(this.datatableElement['dtOptions']['columns'])
    for (let i = 0; i < columns.length; i++) {
      if (columns[i].title) {
        columns[i].title += `<button type="button" data-column-filter="${i}" class="btn column-filter"><i data-column-filter="${i}" class="column-filter fa-solid fa-filter"></i></button>` // [ngClass]= " 'btn-secondary' : ${this.filterParams[i].value} !=='' "
      }
    }

And the html table at devtools looks like this:

htmldom

what concerns me most is how to iterate through the html element, to create a child at each column header and scroll the 'sorting' class

can you please help me? Thank you in advance.