In this demo the dashOffset
property is used to trigger the dash-offset
animation.
So for example if we enter a new percentage in the input field we see the animation is triggered. The code that updates the dashOffset
state looks like this:
@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’s not the first animation, then the dashOffset
state is calculated and this triggers the animation.
If it is the firstAnimation
then dashOffset
state is set in ngAfterViewInit
like this:
ngAfterViewInit() {
if (this.firstAnimation) {
this.dashOffset = this.calculateDashOffset(this.percentageState);
this.firstAnimation = false;
console.log(`The dash offset is ${this.dashOffset}`);
}
}
However this does not trigger the animation.
Where in the component lifecycle should we initialize an animation trigger in order to trigger the first animation?