title: How to move stepper from one step to second step using angular and angular material
body: <p>I have 2 - 4 step form. I had separate out the form like below structure.
   First there is <code>auth</code> folder under then  there <code>register</code> folder. Under this <code>register</code> - <code>register.ts</code> and <code>register.html</code>. Under <code>register.html</code> I had implemented <code>mat stepper</code> like below :</p>
  
  <pre><code> &lt;mat-horizontal-stepper [linear]="isLinear" #stepper&gt;
  
                      &lt;mat-step [stepControl]="firstFormGroup"&gt;
                        &lt;form [formGroup]="firstFormGroup"&gt;
                          &lt;ng-template matStepLabel&gt; step 1 &lt;/ng-template&gt;
                          &lt;mat-card class="example-card"&gt;
                                  &lt;mat-card-header&gt;
                                      &lt;div mat-card-avatar class="example-header-image"&gt;&lt;/div&gt;
                                      &lt;mat-card-title&gt;step 1&lt;/mat-card-title&gt;
                                  &lt;/mat-card-header&gt;
                                  &lt;mat-card-content&gt;
                                          &lt;kt-stepone&gt;&lt;/kt-stepone&gt;
                                  &lt;/mat-card-content&gt;
  
                          &lt;/mat-card&gt;
  
                          &lt;div&gt;
  
                          &lt;/div&gt;
                        &lt;/form&gt;
                      &lt;/mat-step&gt;
  
                      &lt;mat-step [stepControl]="secondFormGroup"&gt;
                        &lt;form [formGroup]="secondFormGroup"&gt;
                          &lt;ng-template matStepLabel&gt; step 2 &lt;/ng-template&gt;
                              &lt;mat-card class="example-card"&gt;
                                  &lt;mat-card-header&gt;
                                      &lt;div mat-card-avatar class="example-header-image"&gt;&lt;/div&gt;
                                      &lt;mat-card-title&gt;step 2&lt;/mat-card-title&gt;
                                  &lt;/mat-card-header&gt;
                                  &lt;mat-card-content&gt;
                                          &lt;kt-steptwo&gt;&lt;/kt-steptwo&gt;
                                  &lt;/mat-card-content&gt;
                              &lt;/mat-card&gt;
  
                        &lt;/form&gt;
                      &lt;/mat-step&gt;
  </code></pre>
  
  <p>under my <code>register.ts</code> :</p>
  
  <pre><code>export class RegisterComponent implements OnInit, OnDestroy {
    isLinear = true;
  }
  </code></pre>
  
  <p>Now this 
  <code>&lt;kt-stepone&gt;</code> is my step 1 form which is separate module and there I implemented the Next button.</p>
  
  <p>Now when I implemented <code>isLinear = true;</code> then even after filling the whole form its not going on next step. If I didnt fill the form then its working as per expection highligting the fileds with red</p>
  
  <p>For ref, here is <code>&lt;kt-stepone&gt;</code>code :</p>
  
  <pre><code>&lt;form class="kt-form" [formGroup]="steponeForm" autocomplete="off" (ngSubmit)="onSubmit()"&gt;
              &lt;div class="kt-portlet__body" &gt;
                  //MY FORM
              &lt;/div&gt;
                   // submit button
              &lt;button mat-button matStepperNext color="primary" type="submit"&gt;Next&lt;/button&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>Since I am using angular for first time, please tell me where I am making mistake in this approach.</p>
  
  <p>Updated KT-STEPONE.ts:</p>
  
  <pre><code>import { MatStepper } from '@angular/material/stepper';
  completed=false;
  @ViewChild('stepper') stepper: MatStepper;
  onSubmit(){
  
      this.stepper.selected.completed = true;
      this.stepper.next();
    }
  
  
  
  
  </code></pre>