title: Angular Material stepper not proceeding to next step when being called from nested component. (Angular 11)
body: <p>When calling</p>
  <pre><code>this.stepper.next()
  </code></pre>
  <p>using a button on the child component, the stepper is not progressed until the second time the button is clicked.</p>
  <p>Parent Component Html</p>
  <pre><code>&lt;mat-card&gt;
    &lt;mat-card-header&gt;Test&lt;/mat-card-header&gt;
    &lt;mat-card-content&gt;
      &lt;mat-horizontal-stepper #stepper linear&gt;
        &lt;mat-step [completed]='this.CheckIfStepCompleted(1)'&gt;
          &lt;mat-card&gt;
            &lt;mat-card-content&gt;
              &lt;app-comp1 [steps]='this.steps'&gt;&lt;/app-comp1&gt;
            &lt;/mat-card-content&gt;
            &lt;mat-card-actions align='start'&gt;
             &lt;!-- &lt;button mat-raised-button matStepperNext color='primary' [disabled]='!this.CheckIfStepCompleted(1)'&gt;Next&lt;/button&gt; --&gt;
            &lt;/mat-card-actions&gt;
          &lt;/mat-card&gt;
        &lt;/mat-step&gt;
        &lt;mat-step [completed]='this.CheckIfStepCompleted(2)'&gt;
          &lt;mat-card&gt;
            &lt;mat-card-content&gt;
              &lt;app-comp2 [steps]='this.steps'&gt;&lt;/app-comp2&gt;
            &lt;/mat-card-content&gt;
            &lt;mat-card-actions align='start'&gt;
              &lt;button mat-raised-button matStepperNext color='primary' [disabled]='!this.CheckIfStepCompleted(2)'&gt;Next&lt;/button&gt;
            &lt;/mat-card-actions&gt;
          &lt;/mat-card&gt;
        &lt;/mat-step&gt;
        &lt;mat-step [completed]='this.CheckIfStepCompleted(2)'&gt;
          &lt;mat-card&gt;
            &lt;mat-card-content&gt;
              &lt;app-comp3 [steps]='this.steps'&gt;&lt;/app-comp3&gt;
            &lt;/mat-card-content&gt;
            &lt;mat-card-actions align='start'&gt;
              &lt;button mat-raised-button matStepperPrevious color='primary' [disabled]='!this.CheckIfStepCompleted(2)'&gt;Back&lt;/button&gt;
            &lt;/mat-card-actions&gt;
          &lt;/mat-card&gt;
        &lt;/mat-step&gt;
      &lt;/mat-horizontal-stepper&gt;
    &lt;/mat-card-content&gt;
  &lt;/mat-card&gt;
  </code></pre>
  <p>Child Component Html</p>
  <pre><code>  &lt;button (click)='this.Complete()' mat-raised-button color='accent'&gt;Complete&lt;/button&gt;
  </code></pre>
  <p>Child Component ts file</p>
  <pre><code>import { Component, Input, NgZone, OnInit, ViewChild, ViewChildren } from '@angular/core';
  import { MatHorizontalStepper } from '@angular/material/stepper';
  import { Step, SteppperService } from '../../services/stepper/steppper.service';
  
  @Component({
    selector: 'app-comp1',
    templateUrl: './comp1.component.html',
    styleUrls: ['./comp1.component.css']
  })
  export class Comp1Component implements OnInit {
  
    @Input() steps: Step[] = [];
  
    constructor(private _stepSvc: SteppperService, private readonly stepper: MatHorizontalStepper, private ngZone: NgZone) { }
    selectedIndex: number = this.stepper.selectedIndex;
    ngOnInit(): void {
    }
    Complete() {
      this._stepSvc.CompleteStep(this.steps, 1).then(() =&gt; this.stepper.next());
      // this.ProgressStep();
    }
    ProgressStep() {
      this.ngZone.run(() =&gt; {
        this.stepper.next();
      });
    }
  }
  </code></pre>
  <p>We have also tried creating a function on the parent and having a event be emitted from the child component to trigger the next().</p>
  <p><strong>TLDR:</strong> I need to trigger the next() for the stepper located on the parent component, but I need to trigger it from the child component.</p>