title: Angular Material Stepper is undefined on first load
body: <p>I'm using Angular Material Stepper in a component. The problem is that when the component loads for the first time it breaks with the error message</p>
  
  <pre><code>ERROR TypeError: Cannot read property 'selectedIndex' of undefined
  </code></pre>
  
  <p>My Template</p>
  
  <pre><code>&lt;mat-horizontal-stepper #stepper&gt;
          &lt;!-- Steps --&gt;
  &lt;/mat-horizontal-stepper&gt;    
  &lt;div&gt;
      &lt;button (click)="goBack(stepper)" type="button" 
          [disabled]="stepper.selectedIndex === 0"&gt;Back&lt;/button&gt;
      &lt;button (click)="goForward(stepper)" type="button" 
          [disabled]="stepper.selectedIndex === stepper._steps.length-1"&gt;Next&lt;/button&gt;
  &lt;/div
  </code></pre>
  
  <p>My TS</p>
  
  <pre><code>import { MatStepper } from '@angular/material/stepper';
  
  goBack(stepper: MatStepper){
      stepper.previous();
  }
  
  goForward(stepper: MatStepper){
      stepper.next();
  }
  </code></pre>
  
  <p>And I also have stepper defined in TS as</p>
  
  <pre><code>@ViewChild('stepper') stepper: MatStepper;
  </code></pre>
  
  <p>But if I use the [disabled] property as</p>
  
  <pre><code>&lt;div&gt;
      &lt;button (click)="goBack(stepper)" type="button" 
          [disabled]="stepper ? stepper.selectedIndex === 0 : false"&gt;Back&lt;/button&gt;
      &lt;button (click)="goForward(stepper)" type="button" 
          [disabled]="stepper ? stepper.selectedIndex === stepper._steps.length-1 : false"&gt;Next&lt;/button&gt;
  &lt;/div
  </code></pre>
  
  <p>than the stepper works as expected.</p>
  
  <p><strong>Note:</strong></p>
  
  <pre><code>Angular Version is :5.2.8
  Angular Material Version:5.2.5 
  </code></pre>