title: How to use a material stepper in Angular 5
body: <p>I'm currently somewhat new to Angular and I'm trying to figure out how to make a simple stepper that goes (1) -- (2) -- (3).</p>
  
  <p>I have the html down as app.component.html</p>
  
  <pre><code>&lt;mat-horizontal-stepper [linear]="true" #stepper&gt;
      &lt;mat-step label="Step 1"&gt;
          step 1
      &lt;/mat-step&gt;
      &lt;mat-step label="Step 2"&gt;
          step 2
      &lt;/mat-step&gt;
  &lt;/mat-horizontal-stepper&gt;
  </code></pre>
  
  <p>However, what do I need to import and do in typescript to make this work?  I have app.component.ts as </p>
  
  <pre><code>import { Component, ViewChild } from '@angular/core';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { MatButtonModule } from '@angular/material';
  import {FormsModule, ReactiveFormsModule} from '@angular/forms';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  
  export class AppComponent {
    @ViewChild('stepper') stepper;
    changeStep(index: number) {
      this.stepper.selectedIndex = index;
    }
  }
  </code></pre>