title: Linear mode is not working in mat-horizontal-stepper with separate components
body: <p>I, am trying to separate the component of each step in mat-horizontal-stepper as shown in the below html page.</p>
  
  <pre><code>&lt;mat-horizontal-stepper [linear]="true" #stepper&gt;
    &lt;mat-step [stepControl]="selectAdvType"&gt;
      &lt;ng-template matStepLabel&gt;
        &lt;div class="text-center"&gt;
          &lt;mat-icon&gt;queue_play_next&lt;/mat-icon&gt;&lt;br /&gt;&lt;span&gt;Select Adv Type&lt;/span&gt;
        &lt;/div&gt;
      &lt;/ng-template&gt;
      &lt;app-advertisement-type&gt;&lt;/app-advertisement-type&gt;
    &lt;/mat-step&gt;
    &lt;mat-step [stepControl]="selectCarAdvType"&gt;
      &lt;ng-template matStepLabel&gt;
        &lt;div class="text-center"&gt;
          &lt;mat-icon&gt;directions_car&lt;/mat-icon&gt;&lt;br /&gt;&lt;span&gt;Select Car&lt;/span&gt;
        &lt;/div&gt;
      &lt;/ng-template&gt;
      &lt;app-select-car-adv&gt;&lt;/app-select-car-adv&gt;
    &lt;/mat-step&gt;
    &lt;mat-step&gt;
      &lt;ng-template matStepLabel&gt;
        &lt;div class="text-center"&gt;
          &lt;mat-icon&gt;description&lt;/mat-icon&gt;&lt;br /&gt;&lt;span&gt;Select Features&lt;/span&gt;
        &lt;/div&gt;
      &lt;/ng-template&gt;
      &lt;div&gt;
        &lt;button mat-button matStepperPrevious&gt;Back&lt;/button&gt;
        &lt;button mat-button (click)="stepper.reset()"&gt;Reset&lt;/button&gt;
      &lt;/div&gt;
    &lt;/mat-step&gt;
  &lt;/mat-horizontal-stepper&gt;
  </code></pre>
  
  <p><strong>app-advertisement-type component</strong></p>
  
  <pre><code>&lt;form [formGroup]="selectAdvType"&gt;
      &lt;ng-template matStepLabel&gt;Fill out your name&lt;/ng-template&gt;
      &lt;mat-form-field&gt;
          &lt;input matInput placeholder="Last name, First name" formControlName="firstCtrl" required&gt;
      &lt;/mat-form-field&gt;
      &lt;div&gt;
          &lt;button mat-button matStepperNext&gt;Next&lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>app-select-car-adv component</strong></p>
  
  <pre><code>&lt;form [formGroup]="selectCarAdvType"&gt;
        &lt;ng-template matStepLabel&gt;Fill out your name&lt;/ng-template&gt;
        &lt;mat-form-field&gt;
            &lt;input matInput placeholder="Last name, First name" formControlName="firstCtrl" required&gt;
        &lt;/mat-form-field&gt;
        &lt;div&gt;
            &lt;button mat-button matStepperNext&gt;Next&lt;/button&gt;
        &lt;/div&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p><strong>Validation on the component class</strong></p>
  
  <pre><code>export class AdvertisementTypeComponent implements OnInit {
    selectAdvType: FormGroup;
    constructor(private _formBuilder: FormBuilder) { }
  
    ngOnInit() {
      this.selectAdvType = this._formBuilder.group({
        firstCtrl: ['', Validators.required]
      });
    }
  
  }
  </code></pre>
  
  <p>Since the linear functionality is not working. I, am able to navigate to the other component. How can I solve this.</p>