My goal is to introduce an @Input parameter that will define the timing of the animation in this demonstration of circle progress.
However, the animation settings are currently specified within the @Component decorator, and it seems that this code does not have access to the component's runtime state.
@Component({
selector: 'el-circle-progress',
standalone: true,
imports: [CommonModule],
templateUrl: `./svg-circle.component.svg`,
styleUrls: ['./svg-circle.component.css'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
animations: [
trigger('animateStroke', [
state(
'*',
style({
'stroke-dashoffset': '*',
})
),
transition('*<=>*', animate('3s linear')),
]),
],
})
Is there a way to dynamically configure the animation parameters?
Currently, the transition is set up like so:
transition('*<=>*', animate('3s linear')),
But I would like to be able to adjust the timing represented by the 3s value...