Completed property in Angular Material Stepper doesn't seem to work as expected

Question

Here is a stackblitz of this behavior. What I expect to see is that when the Complete button is clicked, the first step is complete, so the icon would change to "10". However, there is no change, and even when moving to the second step, the icon is "create". Am I misunderstanding how the completed property is supposed to be working, or is there a bug in the Material code?

Answer 1

Couple of things wrong here:

the icon is "create":

The stepper has a dependency on material icons. Adding material-icons to your project and the 'cre' icon is gone.

Also, the create / edit icon is normal behavior for a completed step. If you like the step to be marked as done you have to set completed=true and editable = false

Another issue is the use of let-index="index". There is nothing in the V5 docs on this. (And your stackblitz is using V5).

If you have the possibility to upgrade to V6, then it's possible to what you're asking. I've created a stackblitz for this behaviour.

component.ts

import { Component, ViewChild } from '@angular/core';
import { MatHorizontalStepper } from '@angular/material';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  @ViewChild(MatHorizontalStepper) stepper: MatHorizontalStepper;

  complete() {
      this.stepper.selected.completed = true;
      this.stepper.selected.editable = false;
      this.stepper.next();
  }
}

component.html

<mat-horizontal-stepper linear id="stepper">

  <ng-template matStepperIcon="done" let-index="index">
    {{(index+1) * 10}}
  </ng-template>

  <mat-step label="Step 1">
    <p>Step 1</p>
    <button mat-button (click)="complete()" mat-raised-button color="primary">Complete</button>
  </mat-step>

  <mat-step label="Step 2">
    <h3>Step 2</h3>
    <button mat-button (click)="complete()" mat-raised-button color="primary">Complete</button>
  </mat-step>

  <mat-step label="Step 3">
    <h3>Step 3</h3>
    <button mat-button (click)="complete()" mat-raised-button color="primary">Complete</button>
  </mat-step>

</mat-horizontal-stepper>