How to wait for Angular to initialize before triggering an animation?

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?