title: Formarray slow rendering while loading large data in angular 6
body: <p>I am using angular 6. In that I am loading dynamic form using formarray.</p>
  
  <p>Formarray contains more than 100rows of drop-down box. While loading large data it hangs the browser it takes more time to render the data.</p>
  
  <p>That 100row drop-down contains state and city list.</p>
  
  <p>While user editing the I have to show the selected state and city in rendered drop-down.</p>
  
  <p>Is there any way to increase the performance of formarray data rendering.</p>
  
  <p>Component.html</p>
  
  <pre><code> &lt;Form [formgroup]="invest"&gt;
   &lt;Div formArrayName="addinvest"&gt;
    &lt;div *ngFor="let addinvest of invest.controls.addinvest.controls;let I= index&gt;
     &lt;div [formGroupName]="i"&gt;
      &lt;select fromControlName="state"&gt;
       &lt;option *ngFor="let state of states" [value]="state"&gt;{{state}}&lt;/option&gt;
      &lt;/Select&gt;
      &lt;select fromControlName="state"&gt;
       &lt;option *ngFor="let city of cities" [value]="city"&gt;{{city}}. 
    &lt;/option&gt;
      &lt;/Select&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;/form&gt;
  </code></pre>
  
  <p>Component.ts</p>
  
  <pre><code>setStateControl(){
  let control=&lt;FormArray&gt;this.invest.controls.addinvest;
  This.statelist.foreach(x=&gt; {
    Control.push(this.fb.group({
      state: x.state,
      City: x.city
    })
   }
  </code></pre>
  
  <p>Before that I have loaded all drop-down list. While user editing the from I have to show corresponding values in drop-down </p>
  
  <p>Note: Above code snippet is sample. May it contains some spelling mistake.</p>