Real Time Data binding for PrimeNG progress bar value

Question

I am validating an array and I want a progress bar on it. I am trying to bind value on progress bar but unfortunately its not changing real time on html.

Here is my HTML.

<div *ngIf="progressValue <= 100" >
    <p-progressBar [value]="progressValue"></p-progressBar>
  </div>

and Here is my Ts.

jsonDATA.forEach((element , tIndex) => {


let interval = setInterval(() => {
                  this.progressValue =  Math.round((tIndex / (jsonDATA.length-1) ) * 100 );
                  if (this.progressValue < 100) {
                    
                      clearInterval(interval);
                  }
                  else if (this.progressValue === 100) {

                   
                    clearInterval(interval);
                }
              }, 200);
            //do Some Validation in nested for loop

}

my Problem is this interval works after my jsonDATA array is validated. I want it to work real time as my array indexes are validated.