title: Angular Material Stepper - Calling next() not working until I click on the view
body: <p>I'm building an electron app with angular 7 and angular material</p>
  
  <p>I have a Stepper which 2nd step makes a call to electron main to make the user select a folder where application stuff will be saved.
  When it's selected it makes a call to 'selectedWorkingFolder', which sets the step as completed and <strong>should directly go to step 3 with (this.stepper.next()), this doesnt work unless I click anywhere on the window.</strong></p>
  
  <p>Here's a gif showing it</p>
  
  <p><a href="https://i.gyazo.com/7e17510822bc7b3946bc6e917e965466.mp4" rel="nofollow noreferrer">https://i.gyazo.com/7e17510822bc7b3946bc6e917e965466.mp4</a></p>
  
  <p>Here's the controller code </p>
  
  <pre><code>import { Component, OnInit, Input, ChangeDetectorRef, ViewChild } from '@angular/core';
  import { ElectronService } from 'src/app/services/electron/electron.service';
  import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  
  
  @Component({
      selector: 'app-main',
      templateUrl: './main.component.html',
      styleUrls: ['./main.component.css']
  })
  
  export class MainComponent implements OnInit {
  
      @ViewChild('stepper') stepper;
  
      firstFormGroup: FormGroup;
      secondFormGroup: FormGroup;
  
      isLinear = true;
  
      constructor(
          private readonly ipcServ: ElectronService,
          private cdRef: ChangeDetectorRef,
          private _formBuilder: FormBuilder,
      ) {
          this.firstFormGroup = this._formBuilder.group({
              firstCtrl: ['', Validators.required]
          });
  
          this.secondFormGroup = this._formBuilder.group({
              secondCtrl: ['', Validators.required]
          });
  
          this.ipcServ.on('databaseCheckResult', (event, docs) =&gt; {
              console.log(docs);
              this.changeState(docs);
          });
  
          this.ipcServ.on('selectedWorkingFolder', (event, docs) =&gt; {
              this.stepper.selected.completed = true;
              this.stepper.selected.editable = false;
              this.stepper.next();
          });
  
      }
  
      ngOnInit() {
          this.ipcServ.send('checkdb');
      }
  
      changeState(action) {
          if (action === 'unconfigured') {
              this.cdRef.detectChanges();
          } else {
  
          }
      }
  
      stepperEvents(event) {
          if (event.selectedIndex === 1) {
              this.ipcServ.send('selectFolder');
          }
  
      }
  }
  </code></pre>
  
  <p>Here's the html code</p>
  
  <pre><code>&lt;mat-vertical-stepper labelPosition="bottom" #stepper (selectionChange)="stepperEvents($event)"&gt;
      &lt;mat-step [stepControl]="firstFormGroup"&gt;
          &lt;form [formGroup]="firstFormGroup"&gt;
              &lt;ng-template matStepLabel&gt;Enter your profile name&lt;/ng-template&gt;
              &lt;mat-form-field&gt;
                  &lt;input matInput placeholder="Profile Name" formControlName="firstCtrl" required&gt;
              &lt;/mat-form-field&gt;
  
              &lt;br&gt;
          &lt;/form&gt;
      &lt;/mat-step&gt;
      &lt;mat-step [stepControl]="secondFormGroup"&gt;
          &lt;ng-template matStepLabel&gt;Select the working folder&lt;/ng-template&gt;
      &lt;/mat-step&gt;
      &lt;mat-step&gt;
          &lt;ng-template matStepLabel&gt;Done&lt;/ng-template&gt;
          You are now done.
      &lt;/mat-step&gt;
  &lt;/mat-vertical-stepper&gt;
  </code></pre>
  
  <p>Also i'm pretty new to angular so any tips on how to improve my code would help a lot.</p>
  
  <p>Thanks</p>