do you support ngModel I get Error: No value accessor for form control with name: 'modelstring'

[moorthi07]

Editor is not displaying. (it appears a tiny pixels in a corner of my container). Even though the style seemed to be applied. (here is the style from console) monaco-editor[_ngcontent-c18] { height: 500px; }

I get this error: Error: No value accessor for form control with name: 'modelstring' for, <monaco-editor required [(ngModel)] ="Entity.modelstring" name="modelstring" [mode]="'json'" [theme]="'clouds'" [options]="options" [readOnly]="false" >

And below is a working ng-ace editor , <ace-editor required [(text)] ="Entity.modelstring" name="modelstring" [mode]="'json'" [theme]="'clouds'" [options]="options" [readOnly]="false"
(change)="onChange()" style="display:block; height: 80vh; width:100%">

[SamVerschueren]

Please read the docs. This is not a drop in replacement with the Ace editor. We don't expose ngModel. You have to bind to file.

[moorthi07]

Ok. Its not the standard. But, still not working with error 'File' is not exported in ngx-monaco!

[SamVerschueren]

Oh sorry, has to be MonacoFile.

[moorthi07]

{ uri: string; language: string; content: string; }' is not assignable to type 'File'. Object literal may only specify known properties, and 'uri' does not exist in type 'File'.

[moorthi07]

'File' is cross referencing some other api. I suggest use the monaco standard that would also be easy for one to quickly try

[moorthi07]

interface File var File: { Is this right definition for FILE?
new (parts: (string | Blob | ArrayBuffer | ArrayBufferView)[], filename: string, properties?: FilePropertyBag): File; prototype: File; }

[moorthi07]

Ok, now I tried , file: MonacoFile = { uri: 'index.js', language: 'javascript', content:console.log('hello world');` };

onFileChange(file: MonacoFile) {
    // Handle file change
}`

throws this error, this is dragging tooooooooooo long. 👎 GET http://localhost:4200/libs/vs/loader.js net::ERR_ABORTED

[SamVerschueren]

Take the time to read the docs. You probably forgot to add this entry to .angular-cli.json https://github.com/SamVerschueren/ngx-monaco#angular-clijson

[moorthi07]

NOpe. I did add. Otherwise it will break right there. Anyways, I even tried moving output to "output": "./assets/monaco/", not working

[SamVerschueren]

Did you install monaco-editor? Not just ngx-monaco?

[moorthi07]

"monaco-editor": "^0.10.1",

[SamVerschueren]

Output has to be libs/vs, otherwise it will fail to bootstrap Monaco. Can you verify if you actually have something in your libs folder?

[moorthi07]

ok. I reinstalled both and it seems the style is not picking. So put the style in the directive , that shows the editor now.
<monaco-editor theme="vs-light" [file]="file" (fileChange)="onFileChange($event)" style="display:block; height: 80vh; width:100%"> </monaco-editor>

[moorthi07]

But do you support bi directional binding? instead of me updating every time onChange?

[moorthi07]

This is kind of redundant to do. onFileChange(infile: MonacoFile) { this.file.content= infile.content; console.log(' this.file.content', infile.content); }

[moorthi07]

Great. bi directional binding works as well. Thanks for the help. <monaco-editor theme="vs-light" [(file)]="file" (fileChange)="onFileChange($event)" style="display:block; height: 80vh; width:100%">

[SamVerschueren]

Yes that works, but I'm not a big fan of two-way databinding.

Style should work inside a css file if you set display: block.