equivalent of element.text() jquery function in Angular

Question

I'm trying to convert this beautiful Loading Indicator artwork which is in jQuery into Angular , I have myself stuck in the converting process.

I don't want to create a js file and then have it added to angular.json scripts section. I want to write it with Renderer2 and no pure JavaScript.

i have come this far in the converting process :

  initAnimation() {
    const inner = this.renderer.createElement('div')
    this.renderer.appendChild(this.loadingElm, inner)
    let min = 20, max = 70, minMove = 10, maxMove = 20;
    this.startAnimation(inner, min, max, minMove, maxMove)
  }

  startAnimation(elem, min?, max?, minMove?, maxMove?) {
    this.renderer.removeClass(elem, 'start')
    // elem.removeClass('start');
    this.setAnimationCSSVars(elem, min, max, minMove, maxMove);

    void elem[0].offsetWidth;

    this.renderer.addClass(elem, 'start')
    // elem.addClass('start');
  }

  setAnimationCSSVars(elem, min, max, minMove, maxMove) {
    let innertext: string = ''
    this.span.forEach((el) => {
      let txt = el.innerText = innertext.trim()
    })
    let width = Math.ceil(elem.width()),
      text = elem.text();
    for (let i = 1; i < width; i++) {
      let num = Math.floor(Math.random() * (max - min + 1)) + min,
        numMove = Math.floor(Math.random() * (maxMove - minMove + 1)) + minMove,
        dir = (i % 2 == 0) ? 1 : -1,
        spanCurrent = elem.find('span:eq(' + i + ')')
      // span = spanCurrent.length ? spanCurrent : $('<span />');

      this.span.forEach((el) => {
        let txt = el.innerText = innertext.trim()
        this.renderer.setStyle(el, 'transform', `translateX:(${i - 1}px)`)
        this.renderer.setStyle(el, 'transform', `translateY:(${num * dir}px)`)
        this.renderer.setStyle(el, 'animation-delay', `${i * 10}ms`)
        if (!spanCurrent.length) {
          this.renderer.appendChild(this.loadingElm, el)
          // elem.append(span.text(text));
        }
      })

      // span.css({
      //   '--x': i - 1 + 'px',
      //   '--move-y': num * dir + 'px',
      //   '--move-y-s': ((i % 2 == 0) ? num * dir - numMove : num * dir + numMove) + 'px',
      //   '--delay': i * 10 + 'ms'
      // });
    }

  }

It might seems a little bi messy but I think you get the idea. this loading indicator is going to be attached to a Subject and i got the idea from this medium post if you want to create a custom loading indicator component with http_interceptor service and a loading-event global service.

link to medium post