Angular Material Progress bar refresh YouTube emeded video

Question

I have simple progress bar based on Angular Material Progress Bar made by Eliseo based on interval.

Issuse is that when progress bar is starded it refresh whole page instead of progress bar, even embeded YouTube video is refreshed.

Here is stackblitz working example.

Any idea how to aproach to this issuse?

Answer 1

SOLUTION

.TS

@Component({
...
changeDetection: ChangeDetectionStrategy.OnPush,
})

  public groundProgressbarValue: BehaviorSubject<number> = new BehaviorSubject(100);

this.groundProgressbarValue.next(100 - (sec * 100) / begin);

.HTML

<mat-progress-bar class="earth" mode="determinate" [value]="groundProgressbarValue | async"></mat-progress-bar>