Search code examples
angularmonaco-editor

Monaco Editor with Angular 9 doesn't show up

I have been trying to setup monaco editor with Angular 9, using ngx-monaco-editor.

However, the editor doesn't show up. What am I doing wrong?

Here is the stackblitz link of what I am trying: https://stackblitz.com/edit/angular-ynznyg

I tried to follow the example from official example here: https://materia-ngx-monaco-editor-example-r7xdce.stackblitz.io

Solution

  • You are doing fine, you just missed the content of both css files.

    style.css:

    html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
}

    app.component.css:

    h1 {
  margin: 15px;
  color: darkblue;
  height: 37px;
}
ngx-monaco-editor {
  height: calc(100% - 100px);
  width: 100%;
  padding: 15px;
}

    Here is the working version of your Stackblitz.

    Note: You have linked only the result of the stackblitz, not the stackblitz itself. With this it is hard to find your code.