Within this demonstration, the use of the dashOffset property initiates the animation for the dash-offset.
For instance, upon entering a new percentage in the input field, the animation is activated. The code responsible for updating the dashOffset state is as follows:
@Input({ transform: (p: string) => parseInt(p) })
set percentage(p: number) {
this.percentageState = p;
if (!this.firstAnimation) {
if (!!p) {
this.dashOffset = this.calculateDashOffset(this.percentageState);
} else {
this.dashOffset = undefined;
}
}
If it is not the first animation, the calculation of the dashOffset state triggers the animation.
In case of the firstAnimation, the dashOffset state is established in ngAfterViewInit by the following:
ngAfterViewInit() {
if (this.firstAnimation) {
this.dashOffset = this.calculateDashOffset(this.percentageState);
this.firstAnimation = false;
console.log(`The dash offset is ${this.dashOffset}`);
}
}
Nevertheless, this does not activate the animation initially.
In which stage of the component's lifecycle should we initialize an animation trigger to ensure that the first animation is initiated?