Using text Method in TweenLite show undefined

Question

I am using Green Sock Animation i am currently building the loader progress and adding the percentage counter Example :- https://codepen.io/linxlatham/pen/aWJaXp

I am using this link for reference to show percentage counter but using text method show undefined

HTML:

<div class="loader">
  <div class="loader-border">
      <div class="progress" [ngStyle]="{'width': '0%'}">
        <div class="progress-text">
            <p id="count"><p>
        </div>
      </div>
  </div>
</div>

code:

  progres: any;
  width: string;
  count: any;
  tween: any;
  newPercent: any;
  constructor() {}
  ngOnInit() {
    this.progres = document.getElementsByClassName('progress')[0];
    this.count = document.getElementById('count');
    this.tween = new TweenLite(this.progres, 10, {
      width: '100%',
      ease: Linear.easeNone,
      onUpdate: () => {
        this.newPercent = (this.tween.progress() * 100).toFixed();
        console.log(this.count.innerHTML = this.newPercent + '%');
        console.log('-----' + this.count.text()); //show undefined 
      }
    });
  }

but it work fine using innerHTML please tell if i am doing some wrong.

Answer 1

Querying DOM in Angular is not recommended. You need to do this in Angular way.

First you need to user template reference variable, so that you can refer them in your component. Template reference variables are prefixed with #.

 <div class="loader">
      <div class="loader-border">
          <div class="progress" [ngStyle]="{'width': '0%'}" #progress>
            <div class="progress-text">
                <p id="count" #count><p>
            </div>
          </div>
      </div>
    </div>

Now in you component you need to import ViewChild and ElementRef and use them like below:

  progres: any;
  width: string;
  count: any;
  tween: any;
  newPercent: any;
  @ViewChild('count') count: ElementRef;
  @ViewChild('progress') count: ElementRef;
  constructor() {}
  ngOnInit() {
    this.progres =  this.progress.nativeElement;
    this.count = this.count.nativeElement;
    this.tween = new TweenLite(this.progres, 10, {
      width: '100%',
      ease: Linear.easeNone,
      onUpdate: () => {
        this.newPercent = (this.tween.progress() * 100).toFixed();
        this.count.nativeElement.innerHTML = this.newPercent + '%');
      }
    });
  }