ng2-codemirror not view content in modal until click

[danishwebindia]

I am working in angular 4 with ng2 bs3 modal and add codemirror into my modal. my code is here: Click Event <a href="javascript:void(0)" class="btn btn-info pull-right btn-sm" (click)="defi(apidetail.detailinfo, apidetail.detailtype,i)">View all</a>

Modal `<modal #modalDetail [backdrop]="'static'">

{{dialogTitle}}

<table width="100%" class="table table-bordered" *ngIf="modalPopUp=='g'">
  <tr *ngFor="let detail of definitionList">
    <td style="width:200px; vertical-align:middle">{{detail.detailkey}}</td>
    <td ><codemirror [(ngModel)]="detail.detailvalue" [config]="config" ></codemirror></td>
    
  </tr>
</table>

Close `

from component.ts this.config = { mode:'application/xml',theme: 'eclipse', lineNumbers: true, lineWrapping: true,readOnly: true,cursorBlinkRate: -1}; defi(data) { this.slimLoadingBarService.start(); this.definitionList = data; this.modalPopUp = 'g'; this.modalDetail.open('lg') this.slimLoadingBarService.complete(); } from appmodule.ts `import { CodemirrorModule } from 'ng2-codemirror'; imports: [ BrowserModule, AppRoutingModule, FormsModule, HttpModule, Ng2Bs3ModalModule, CodemirrorModule, DndModule.forRoot(), SlimLoadingBarModule.forRoot(),

]`

[AceTheNinja]

I am facing the same problem any workaround?

[Romgua]

I have an error too with ng2-codemirror and ng2-bs3-modal. I use this config : {lineNumbers: true, theme: 'mdn-like', mode: 'clike', height: '500px'}

Before clicking :

After clicking :

And when writing :

~~ EDIT ~~ For the css issue I add 2 rules :

#my-modal .CodeMirror-sizer {
  margin-left: 39px !important;
}

#my-modal .cm-s-mdn-like .CodeMirror-gutters {
  width: 32px;
}

But I always need to click on the CodeMirror to display text, and also press a button on my keyboard to pass in editing mode (not readOnly).

[Romgua]

I found a solution ! You just need to "refresh" the codemirror instance ;) (So you no longer need to override CSS Class)

First in my component.html, I add #editor :

<codemirror #editor name="myCode" [(ngModel)]="code"
 [config]="{lineNumbers: true, theme: 'mdn-like', mode: 'lua', autofocus: true, height: '500px'}">
</codemirror>

Secondly in my component.ts, I declare a ViewChild : @ViewChild('editor') editor:any;

(Don't forget to import it import { Component, OnInit, ViewChild } from '@angular/core';)

And finally, in the function which open the modal in my component.ts :

openModal() {
    let cm = this.editor.instance;
    setTimeout(function() {
        cm.refresh();
        
        // Set cursor to the end
        let posCursor = {line: 0, ch: 0};
        posCursor.line = cm.doc.children[0].lines.length-1;
        posCursor.ch = cm.doc.children[0].lines[posCursor.line].text.length;
        
        cm.doc.setCursor(posCursor);
    }, 200);

    this.modal.open('lg');
}