title: Paused before potential out-of-memory crash (Chrome Browser) when importing and assigning lot of values to the angular form
body: <p>I am using angular material stepper and I am using this selectionChange($event) function which gives me the index of mat-stepper-horizontal menu. </p>
  
  <pre><code>&lt;mat-horizontal-stepper #stepper="matHorizontalStepper" linear="false"
  [selectedIndex]="this.selectedIndex" 
  (selectionChange)="selectionChange($event)"&gt;
  </code></pre>
  
  <p>and in this function i am iterating through the list of values and
  assigning the values to angular form if the values are less than 100 there is no crash of browser but if the values are 
  more than 500 then the browser gets crashed does anyone know how to solve the problem?</p>
  
  <pre><code>selectIndex = 0
  public selectionChange($event?: StepperSelectionEvent): void {  
      this.selectedIndex = $event.selectedIndex
      if (this.selectedIndex === 1) {
          for (let i = 0; i &lt; this.forms.value.length; i++) {
              while (!this.forms.value[i]) {
                  this.forms.addValue()
              }
              this.forms.setValue(this.forms.value[i])
          }
      }   
  }
  </code></pre>