Method ngAfterViewInit

src/material/stepper/stepper.ts:268–295

()

  }

  override ngAfterViewInit(): void {
    super.ngAfterViewInit();

    // Prior to #30314 the stepper had animation `done` events bound to each animated container.
    // The animations module was firing them on initialization and for each subsequent animation.
    // Since the events were bound in the template, it had the unintended side-effect of triggering
    // change detection as well. It appears that this side-effect ended up being load-bearing,
    // because it was ensuring that the content elements (e.g. `matStepLabel`) that are defined
    // in sub-components actually get picked up in a timely fashion. This subscription simulates
    // the same change detection by using `queueMicrotask` similarly to the animations module.
    if (typeof queueMicrotask === 'function') {
      let hasEmittedInitial = false;
      this._animatedContainers.changes
        .pipe(startWith(null), takeUntil(this._destroyed))
        .subscribe(() =>
          queueMicrotask(() => {
            // Simulate the initial `animationDone` event
            // that gets emitted by the animations module.
            if (!hasEmittedInitial) {
              hasEmittedInitial = true;
              this.animationDone.emit();
            }

            this._stateChanged();
          }),
        );
    }
  }

  override ngOnDestroy(): void {
    super.ngOnDestroy();