title: SelectedIndex of stepper not getting updated on click of button in angular
body: <p>When I click the Update Status button specified, the stepper does not get updated to the provided index.</p>
  
  <p>html file:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
  &lt;h2&gt;Connection Status&lt;/h2&gt;
  &lt;button class="btn btn-primary waves-light" mdbWavesEffect (click)=openDialog()&gt;Update Status&lt;/button&gt;
  &lt;p&gt;
     &lt;mat-horizontal-stepper linear #stepper&gt;
        &lt;mat-step label="Connection Request Sent"&gt;&lt;/mat-step&gt;
        &lt;mat-step label="Connection Response Received"&gt;&lt;/mat-step&gt;
        &lt;mat-step label="Connection Established"&gt;&lt;/mat-step&gt;
        &lt;mat-step label="Done"&gt;&lt;/mat-step&gt;
     &lt;/mat-horizontal-stepper&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>ts file:</p>
  
  <pre class="lang-js prettyprint-override"><code>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;
      }
  }
  </code></pre>