ngx-codemirror displaying only after click in formarray

Question

I am using @ctrl/ngx-codemirror to input javascript code which is in a form array. But the values in the codemirror is displaying only after i click in the editor. I am aware that we're supposed to refresh the editor but this refreshes and displays the value of only first editor which is in the form array. How do I refresh every editor which is in the loop?

this is my .html file

<tr formArrayName="dataHandler"
*ngFor="let data of testScriptForm.controls.dataHandler.controls; let i=index">
<td>{{i+1}}</td>
<td [formGroupName]="i">
    <input id="pathname" type="text" class="form-control" formControlName="dynamicVariableName"
    placeholder="Name" >
</td>
<td [formGroupName]="i" width="400">   
    <div class="codecontainer" *ngIf="data.value.responseType=='Javascript'">
    <ngx-codemirror #codeeditor
     formControlName="extractPath" [options]="{ lineNumbers: false,theme: 'default', mode: 'javascript' }" readOnly>
    </ngx-codemirror>
  </div>
</td>
<td>
</tr>

.ts file is

import { CodemirrorComponent } from "@ctrl/ngx-codemirror";
export class ApiVariablesComponent implements OnInit {
  @ViewChild('codeeditor') private codeEditorCmp: CodemirrorComponent;
  constructor(private _fb: FormBuilder, private apiService: ApitestService) {
  this.testScriptForm = this._fb.group({
      dataHandler: this._fb.array([
        this.dataHandler()
      ]),
    });   
   }
   dataHandler() {
    return new FormGroup({
      dynamicVariableName: new FormControl(null, [Validators.required,Validators.pattern(/^[a-zA-Z0-9][a-zA-Z0-9\_]*$/),Validators.maxLength(255)]),
      responseType: new FormControl(this.dataHandlerType[0], []),
      extractPath: new FormControl(null, [Validators.required]),
      projectId: new FormControl(this.projectUuid, []),
      isDataEdit: new FormControl(true, [])
    });
  }
  
  //refresh the editor
  ngAfterViewInit(){
      setTimeout(()=>this.codeEditorCmp.codeMirror.refresh(), 1000)
}
  
  //to display the formarray value
   display(){
   this.displayApi.dataHandler.forEach((item, i) => {
     if(item.status){
      if(item.responseType=='Text'){
        dataCtrl.push(this._fb.group({
          id: item.id,
          uuid: item.uuid,
          dynamicVariableName: new FormControl(item.dynamicVariableName, [Validators.required,Validators.pattern(/^[a-zA-Z0-9][a-zA-Z0-9\_]*$/),Validators.maxLength(255)]),
          responseType:item.responseType,
          extractPath: item.extractPath,
          projectId: item.projectId,
          isDataEdit:false
        }));
      }else{
        dataCtrl.push(this._fb.group({
          id: item.id,
          uuid: item.uuid,
          dynamicVariableName: new FormControl(item.dynamicVariableName, [Validators.required,Validators.pattern(/^[a-zA-Z0-9][a-zA-Z0-9\_]*$/),Validators.maxLength(255)]),
          responseType:item.responseType,
          extractPath:  new FormControl(item.extractPath, [Validators.required]),
          projectId: item.projectId,
          isDataEdit:false
        }));
      }
     
   }
   dataCtrl.disable();
   });
   
  }
  }

Answer 1

Try adding some styles to it. This worked for me to adjust the size of the codemirror container to it's content, and there is also one you can look for in codemirror docs to load X number of rows above and below what your scroll is showing, but play around with this:

@Component({
  ...
  styles: [`
    :host ::ng-deep .cm-s-material.CodeMirror {
      resize: vertical !important;
    }
  `]
})
export class ...