Material Design - stepper how to remove/disable steps?

So I managed with this work-around:
https://github.com/angular/material2/issues/7700#issuecomment-336138411

1) Make a reference to the stepper:

<mat-vertical-stepper #stepper></mat-vertical-stepper>

2) Then, on the .ts side:

import { ViewChild } from '@angular/core';
import { MatVerticalStepper } from '@angular/material';

@ViewChild('stepper') stepper: MatVerticalStepper;

clearAdditionalForms(): void {
  this.inventoryForms = [];
  this.stepper._stateChanged(); // <- this : Marks the component to be change detected.
}

This is calling a private method which is probably a really bad idea, so if you have a better/correct solution, let me know, and I'll change the answer


A slightly more angular way, avoiding the private method way is to record what you need to do on the form control used by the step. So for instance let's say we have a step:

  <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
       <!-- your controls here -->
    </form>
  </mat-step>

Then define your form group:

this.secondFormGroup = this._formBuilder.group({
  check: [false, Validators.requiredTrue]
});

We have now defined a pseudo element "check", that will be validated by the step. Let's say we set something with a click function:

  doClick(item) {
     this.secondFormGroup.controls.check.setValue(item === 'thevalue');     
  }

Angular material will now do the rest, you will not be able to move past the step until item === thevalue.


Add *ngIf in each step

<mat-step *ngIf="*expression*"></mat-step>