Как анимировать с помощью Canvas в Angular ⇐ Javascript

[Anonymous]

Я пытаюсь написать анимированное колесо выполнения в Angular 20. Моя анимация работает в стандартной среде JavaScript, но при портировании на Angular ничего не рисуется на холсте, и я не знаю почему. Я искал в Интернете, и единственные примеры попыток сделать это, которые я могу найти, не работают (проблемы с `this`, поэтому мне пришлось привязать нужные мне значения к методу анимации). Я читал об этом и пробовал все, что мог, но дошел до того, что не понимаю, что происходит не так.
Вот мой компонент. Внизу есть ссылка Stackblitz, воспроизводящая проблему.
Компонент:

Код: Выделить всё

import {
Component,
computed,
input,
signal,
OnInit,
Signal,
ViewChild,
ElementRef,
} from '@angular/core';

@Component({
selector: 'app-progress-wheel',
template: `
Unsupported
`,
})
export class ProgressWheelComponent implements OnInit {
public maxProgress = input(1);
public minProgress = input(1);
public completed = input(0);

@ViewChild('myCanvas')
private canvas: ElementRef;
private context: CanvasRenderingContext2D;
private progressAngle: Signal;
private extraAngle: Signal;
private twoPi = 2 * Math.PI;
private maxIterations = 100;
private animationId: number = 0;

constructor() {}

ngOnInit() {
this.initializeAngles();
}

ngAfterViewInit(): void {
this.context = this.canvas.nativeElement.getContext('2d');
this.animationId = requestAnimationFrame(
this.animate.bind(
this,
this.maxIterations,
this.progressAngle(),
this.extraAngle(),
this.context
)
);
}

ngOnDestroy(): void {
if (this.animationId) {
cancelAnimationFrame(this.animationId);
}
}

private initializeAngles(): void {
const extraCompleted = computed(() =>
Math.max(this.completed() - this.minProgress(), 0)
);

const amountCompletedFraction = computed(
() => (this.completed() - extraCompleted()) / this.minProgress()
);
this.progressAngle = computed(() => amountCompletedFraction() * this.twoPi);

this.extraAngle = computed(() => extraCompleted() * this.twoPi);
}

private animate(maxIterations, progressAngle, extraAngle, context): void {
let i = 0;
let j = 0;
const ctx = context;

if (i 

Подробнее здесь: [url]https://stackoverflow.com/questions/79824977/how-to-animate-using-canvas-in-angular[/url]