Class MatStepper

src/material/stepper/stepper.ts:144–349

  imports: [NgTemplateOutlet, MatStepHeader],
})
export class MatStepper extends CdkStepper implements AfterViewInit, AfterContentInit, OnDestroy {
  private _ngZone = inject(NgZone);
  private _renderer = inject(Renderer2);
  private _animationsDisabled = _animationsDisabled();
  private _cleanupTransition: (() => void) | undefined;
  protected _isAnimating = signal(false);

  /** The list of step headers of the steps in the stepper. */
  @ViewChildren(MatStepHeader) override _stepHeader: QueryList<MatStepHeader> = undefined!;

  /** Elements hosting the step animations. */
  @ViewChildren('animatedContainer') _animatedContainers!: QueryList<ElementRef>;

  /** Full list of steps inside the stepper, including inside nested steppers. */
  @ContentChildren(MatStep, {descendants: true}) override _steps: QueryList<MatStep> = undefined!;

  /** Steps that belong to the current stepper, excluding ones from nested steppers. */
  override readonly steps: QueryList<MatStep> = new QueryList<MatStep>();

  /** Custom icon overrides passed in by the consumer. */
  @ContentChildren(MatStepperIcon, {descendants: true}) _icons!: QueryList<MatStepperIcon>;

  /** Event emitted when the current step is done transitioning in. */
  @Output() readonly animationDone: EventEmitter<void> = new EventEmitter<void>();

  /** Whether ripples should be disabled for the step headers. */
  @Input() disableRipple: boolean = false;

  /**
   * Theme color for all of the steps in stepper. This API is supported in M2
   * themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/stepper/styling.
   *
   * For information on applying color variants in M3, see
   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
   */
  @Input() color: ThemePalette;

  /**
   * Whether the label should display in bottom or end position.
   * Only applies in the `horizontal` orientation.
   */
  @Input()
  labelPosition: 'bottom' | 'end' = 'end';

  /**
   * Position of the stepper's header.
   * Only applies in the `horizontal` orientation.
   */
  @Input()
  headerPosition: 'top' | 'bottom' = 'top';

  /**
   * ARIA label for the stepper.
   */
  @Input('aria-label')
  ariaLabel: string | null = null;

  /** The content prefix to use in the stepper header. */