{"id":13497435,"url":"https://github.com/atularen/ngx-monaco-editor","last_synced_at":"2025-05-15T16:07:14.362Z","repository":{"id":38361887,"uuid":"99952328","full_name":"atularen/ngx-monaco-editor","owner":"atularen","description":"Monaco Editor component for Angular 2 and Above","archived":false,"fork":false,"pushed_at":"2024-07-02T13:39:09.000Z","size":848,"stargazers_count":428,"open_issues_count":147,"forks_count":162,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-05-10T13:43:01.306Z","etag":null,"topics":["angular","angular2","angular4","angular5","angular6","angular7","angular8","monaco-editor"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ngx-monaco-editor","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/atularen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-10T18:13:32.000Z","updated_at":"2025-04-29T14:49:48.000Z","dependencies_parsed_at":"2024-06-18T12:25:54.426Z","dependency_job_id":"198cd0f3-9f98-4d28-9d69-c9cb0769bba2","html_url":"https://github.com/atularen/ngx-monaco-editor","commit_stats":{"total_commits":52,"total_committers":8,"mean_commits":6.5,"dds":"0.17307692307692313","last_synced_commit":"94c1fe19061ee3a1b9d4a0587dd5c82f7c496f2e"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atularen%2Fngx-monaco-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atularen%2Fngx-monaco-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atularen%2Fngx-monaco-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atularen%2Fngx-monaco-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atularen","download_url":"https://codeload.github.com/atularen/ngx-monaco-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254374475,"owners_count":22060611,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2","angular4","angular5","angular6","angular7","angular8","monaco-editor"],"created_at":"2024-07-31T20:00:30.892Z","updated_at":"2025-05-15T16:07:14.309Z","avatar_url":"https://github.com/atularen.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# Monaco Editor Component for Angular 2 and above.\n\n - Angular \u003c= 4: v3.x.x\n - Angular 5: v5.x.x\n - Angular 6: v6.x.x\n - Angular 7: v7.x.x\n - Angular 8: v8.x.x\n - Angular 9: v9.x.x\n - Angular 10: v10.x.x \n - Angular 12: v12.x.x\n\nUsing this Module you can utilize the Monaco Editor as an Angular Component. Feel free to contribute, raise feature requests and make it better.\n\nSupports all the options available in monaco-editor [Monaco Editor Options](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html)\n\n## Setup\n\n### Installation\n\nInstall from npm repository:\n```\nnpm install monaco-editor ngx-monaco-editor --save\n ```\n \nFor angular version 6 use v6.x.x\n```\nnpm install ngx-monaco-editor@6.0.0 --save\n ```\n \nAdd the glob to assets in `.angular-cli.json` schema - `projects.[project-name].architect.build` (to make monaco-editor lib available to the app):\n```typescript\n{\n  \"options\": {\n    {\n      \"assets\": [\n        { \"glob\": \"**/*\", \"input\": \"node_modules/monaco-editor\", \"output\": \"assets/monaco-editor\" }\n      ],\n      ...\n    }\n    ...\n  },\n  ...\n}\n ```\n\n\nFor Angular 6 and below, add the glob to assets in `angular.json`\n```typescript\n{\n  \"apps\": [\n    {\n      \"assets\": [\n        { \"glob\": \"**/*\", \"input\": \"../node_modules/ngx-monaco-editor/assets/monaco\", \"output\": \"./assets/monaco/\" }\n      ],\n      ...\n    }\n    ...\n  ],\n  ...\n}\n ```\n\n### Sample\nInclude MonacoEditorModule in Main Module and Feature Modules where you want to use the editor component.(eg: app.module.ts): \n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { AppComponent } from './app.component';\nimport { MonacoEditorModule } from 'ngx-monaco-editor';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    MonacoEditorModule.forRoot() // use forRoot() in main app module only.\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\nCreate Editor options in component.(eg: app.component.ts)\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html'\n})\nexport class AppComponent {\n  editorOptions = {theme: 'vs-dark', language: 'javascript'};\n  code: string= 'function x() {\\nconsole.log(\"Hello world!\");\\n}';\n}\n```\nInclude editor in html with options and ngModel bindings.(eg: app.component.html)\n```html\n\u003cngx-monaco-editor [options]=\"editorOptions\" [(ngModel)]=\"code\"\u003e\u003c/ngx-monaco-editor\u003e\n```\n\nInclude diff-editor in html with options.(eg: app.component.html)\n```html\n\u003cngx-monaco-diff-editor [options]=\"options\" [originalModel]=\"originalModel\" [modifiedModel]=\"modifiedModel\"\u003e\u003c/ngx-monaco-diff-editor\u003e\n```\n```typescript\nimport { Component } from '@angular/core';\nimport { DiffEditorModel } from 'ngx-monaco-editor';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html'\n})\nexport class AppComponent {\n  options = {\n    theme: 'vs-dark'\n  };\n  originalModel: DiffEditorModel = {\n    code: 'heLLo world!',\n    language: 'text/plain'\n  };\n\n  modifiedModel: DiffEditorModel = {\n    code: 'hello orlando!',\n    language: 'text/plain'\n  };\n}\n```\n\n### Styling\nTo match height of container element add height: 100% and wrap in container\n```html\n\u003cdiv style=\"height: 500px\"\u003e\n    \u003cngx-monaco-editor style=\"height: 100%\" [options]=\"editorOptions\" [(ngModel)]=\"code\"\u003e\u003c/ngx-monaco-editor\u003e\n\u003c/div\u003e\n```\nAdd class to editor tag. (eg. class=\"my-code-editor\")\n```html\n\u003cngx-monaco-editor class=\"my-code-editor\" [options]=\"editorOptions\" [(ngModel)]=\"code\"\u003e\u003c/ngx-monaco-editor\u003e\n```\nAdd styling in css/scss file:\n```scss\n.my-code-editor {\n  .editor-container {\n    height: calc(100vh - 100px);\n  }\n}\n```\nSet automaticLayout option to adjust editor size dynamically. Recommended when using in modal dialog or tabs where editor is not visible initially.\n\n### Events\nOutput event (onInit) expose editor instance that can be used for performing custom operations on the editor. \n```html\n\u003cngx-monaco-editor [options]=\"editorOptions\" [(ngModel)]=\"code\" (onInit)=\"onInit($event)\"\u003e\u003c/ngx-monaco-editor\u003e\n```\n\n```typescript\nexport class AppComponent {\n  editorOptions = {theme: 'vs-dark', language: 'javascript'};\n  code: string= 'function x() {\\nconsole.log(\"Hello world!\");\\n}';\n  onInit(editor) {\n      let line = editor.getPosition();\n      console.log(line);\n    }\n}\n```\n\n## Configurations\n`forRoot()` method of MonacoEditorModule accepts config of type `NgxMonacoEditorConfig`.\n```typescript\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { BrowserModule } from '@angular/platform-browser';\n\nimport { MonacoEditorModule, NgxMonacoEditorConfig } from 'ngx-monaco-editor';\nimport { AppComponent } from './app.component';\n\nconst monacoConfig: NgxMonacoEditorConfig = {\n  baseUrl: 'app-name/assets', // configure base path cotaining monaco-editor directory after build default: './assets'\n  defaultOptions: { scrollBeyondLastLine: false }, // pass default options to be used\n  onMonacoLoad: () =\u003e { console.log((\u003cany\u003ewindow).monaco); } // here monaco object will be available as window.monaco use this function to extend monaco editor functionalities.\n};\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    MonacoEditorModule.forRoot(monacoConfig)\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\n### Configure JSON Defaults\n`onMonacoLoad` property of `NgxMonacoEditorConfig` can be used to configure JSON default.\n```typescript\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { BrowserModule } from '@angular/platform-browser';\n\nimport { MonacoEditorModule, NgxMonacoEditorConfig } from 'ngx-monaco-editor';\nimport { AppComponent } from './app.component';\n\nexport function onMonacoLoad() {\n\n  console.log((window as any).monaco);\n\n  const uri = monaco.Uri.parse('a://b/foo.json');\n  monaco.languages.json.jsonDefaults.setDiagnosticsOptions({\n    validate: true,\n    schemas: [{\n      uri: 'http://myserver/foo-schema.json',\n      fileMatch: [uri.toString()],\n      schema: {\n        type: 'object',\n        properties: {\n          p1: {\n            enum: ['v1', 'v2']\n          },\n          p2: {\n            $ref: 'http://myserver/bar-schema.json'\n          }\n        }\n      }\n    }, {\n      uri: 'http://myserver/bar-schema.json',\n      fileMatch: [uri.toString()],\n      schema: {\n        type: 'object',\n        properties: {\n          q1: {\n            enum: ['x1', 'x2']\n          }\n        }\n      }\n    }]\n  });\n\n}\n\nconst monacoConfig: NgxMonacoEditorConfig = {\n  baseUrl: 'assets',\n  defaultOptions: { scrollBeyondLastLine: false },\n  onMonacoLoad\n};\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    MonacoEditorModule.forRoot(monacoConfig)\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\nNow pass model config of type `NgxEditorModel` to Editor Component\n```typescript\n@Component({\n  selector: 'app-root',\n  template: `\u003cngx-monaco-editor [options]=\"options\" [model]=\"model\"\u003e\u003c/ngx-monaco-editor\u003e`,\n  styles: []\n})\nexport class AppComponent {\n  options = {\n    theme: 'vs-dark'\n  };\n  \n  jsonCode = [\n    '{',\n    '    \"p1\": \"v3\",',\n    '    \"p2\": false',\n    '}'\n  ].join('\\n');\n\n  model: NgxEditorModel = {\n    value: this.jsonCode,\n    language: 'json',\n    uri: monaco.Uri.parse('a://b/foo.json')\n  };\n}\n```\n\n## Links\n[Monaco Editor](https://github.com/Microsoft/monaco-editor/)\u003cbr/\u003e\n[Monaco Editor Options](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html)\n\n## License\n\nMIT © [Atul Kumar](https://github.com/atularen)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatularen%2Fngx-monaco-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatularen%2Fngx-monaco-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatularen%2Fngx-monaco-editor/lists"}