ng2-codemirror not view content in modal until click about ng2-codemirror HOT 3 OPEN

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');
}

from ng2-codemirror.

I am facing the same problem any workaround?

from ng2-codemirror.

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).

from ng2-codemirror.