1

When I click the Update Status button specified, the stepper does not get updated to the provided index.

html file:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<h2>Connection Status</h2>
<button class="btn btn-primary waves-light" mdbWavesEffect (click)=openDialog()>Update Status</button>
<p>
   <mat-horizontal-stepper linear #stepper>
      <mat-step label="Connection Request Sent"></mat-step>
      <mat-step label="Connection Response Received"></mat-step>
      <mat-step label="Connection Established"></mat-step>
      <mat-step label="Done"></mat-step>
   </mat-horizontal-stepper>
</p>

ts file:

import { Component, OnInit, ViewChild } from "@angular/core";
import { MatHorizontalStepper } from "@angular/material/stepper";

@Component({
selector: "app-stepper-test",
templateUrl: "./stepper-test.component.html",
styleUrls: ["./stepper-test.component.scss"]
})
 export class StepperTestComponent implements OnInit {@
    ViewChild(MatHorizontalStepper, {
        static: false
    })
    stepper: MatHorizontalStepper;
    constructor() {}
    ngOnInit() {}
    openDialog() {
        this.stepper.selectedIndex = 2;
    }
}
Milo
  • 3,365
  • 9
  • 30
  • 44
ted lennen
  • 79
  • 3
  • Does this answer your question? [Can I programmatically move the steps of a mat-horizontal-stepper in Angular / Angular Material](https://stackoverflow.com/questions/46469233/can-i-programmatically-move-the-steps-of-a-mat-horizontal-stepper-in-angular-a) – kasptom Nov 25 '19 at 13:35
  • What error are you getting? Guide me through it and what exactly you want to do. Because, i have run it on my `ng project`, it is updating when i click the button `updateStatus`. – Akif Hussain Nov 25 '19 at 14:21
  • As you use `linear` stepper, [look at this answer](https://stackoverflow.com/a/50064564/4880379). It is one of the answers for the question linked in my previous comment. – kasptom Nov 25 '19 at 15:39

0 Answers0