title: Angular Material selectionChanged returning previous step instead of current
body: <p>I have a page consisting of two columns. One contains a vertical stepper and the other one should contain a description for each step. I want to update this description according to the current step and therefore listen to the selectionChange-Event. The problem is, that I get the previously chosen step when I look for the selectedIndex, not the one I am now on.</p>
  
  <p>HTML:</p>
  
  <p><code>&lt;div class="row"&gt;
      &lt;div class="col-7 stepperColumn"&gt;
          &lt;mat-vertical-stepper (selectionChange)="onStepChange(eventCreationStepper)" #eventCreationStepper&gt;
              &lt;!--some steps--&gt;
          &lt;/mat-vertical-stepper&gt;
      &lt;/div&gt;
      &lt;div class="col-5"&gt;
          &lt;!--some descriptions--&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></p>
  
  <p>JS:</p>
  
  <p><code>public onStepChange(stepper: MatStepper) {
      console.log(stepper.selectedIndex);
    }</code></p>