{"_id":"@cgfag/ngx-monaco-editor","_rev":"3-4361c11286a64d2fb939570007c70c08","name":"@cgfag/ngx-monaco-editor","dist-tags":{"latest":"11.0.3"},"versions":{"11.0.0":{"name":"@cgfag/ngx-monaco-editor","version":"11.0.0","private":false,"description":"Monaco Code Editor for Angular","keywords":["angular","angular 2+","angular 11","monaco","monaco-editor","code","editor","reusable","component"],"repository":{"type":"git","url":"git+https://github.com/atularen/ngx-monaco-editor.git"},"bugs":{"url":"https://github.com/atularen/ngx-monaco-editor/issues"},"license":"MIT","author":{"name":"Atul Kumar"},"contributors":[{"name":"Atul Kumar","email":"atulaggarwal4288@gmail.com"}],"peerDependencies":{"@angular/common":"^11.2.14","@angular/core":"^11.2.14"},"dependencies":{"tslib":"^2.0.0"},"main":"bundles/cgfag-ngx-monaco-editor.umd.js","module":"fesm2015/cgfag-ngx-monaco-editor.js","es2015":"fesm2015/cgfag-ngx-monaco-editor.js","esm2015":"esm2015/cgfag-ngx-monaco-editor.js","fesm2015":"fesm2015/cgfag-ngx-monaco-editor.js","typings":"cgfag-ngx-monaco-editor.d.ts","metadata":"cgfag-ngx-monaco-editor.metadata.json","sideEffects":false,"gitHead":"ab493c9aa0fe80e56a74108302e1247268403545","homepage":"https://github.com/atularen/ngx-monaco-editor#readme","_id":"@cgfag/ngx-monaco-editor@11.0.0","_nodeVersion":"16.10.0","_npmVersion":"7.24.0","dist":{"integrity":"sha512-lPHrhq6e6ixtH/l7+7ehTqmG4IjajH/8JKsxB6K1Ya3Q33X8JSbsyYJJmfKVWc/mf+pRUSZbCI70pWyJaZ9OWA==","shasum":"3f7d8f3a7b82f9e313a05b96408764dd9c04ff90","tarball":"https://registry.npmjs.org/@cgfag/ngx-monaco-editor/-/ngx-monaco-editor-11.0.0.tgz","fileCount":32,"unpackedSize":192166,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE9qHjQ7HFPqt/3xk3B01mg6k4xG9CiFfOKOj+YnRr4hAiEAzvXkeTgsqB19KRYGuBlPPE/DqiYPGvr7Sc5yGawcIwc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPfEqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAVw/+Ibn1RZInucfsL7ZdA6YP+pX39k7XC5/NHQ5/ugSJrFcMyQLB\r\nYU5+W/FsiRAA1O3x+80+hI4iS1QXyfaQnsHbGchXBfj+15tTI8Y70t5podjv\r\nUPGB4VMultZXzM6/jqa1MG0Rgel7wpFlvqgKioLgLBrh0RtgGaD4TmyoNAlP\r\n4nKc9Vwwg4MtbTCsiCbb5VrO5cgOhyVuqpDmnuJQ2yUFR0advGWoDeitjHgF\r\nZZTt9uo7TdvP74325ADB4dEpXJChw1UuptLQoZ5QcP+S8Kms9mUJyL9ebN5u\r\n4QkNErkkuXpx+w6QELtHgK06+nKBV84r8z4tGFeMgvU2Axx18jy830MasIAE\r\nlsnNXqKRy6QiDjyt+sla8U8vF4f382i772tr/KiObsQV7rtrwdOJI5hHO3t+\r\nscHeNiaitrra6MEoy2yBUuz1VvfzbGugGsQPPIJv85OB14TfaRn1hlJmR9tk\r\n6/jK4gKovGO4EyUwAVt4eqmc15N1xEE3zxXB6v3jytYudt63WoUHS+JPCaoP\r\n2X1fYjy7pWOu3WqlmrPeEMO8l1M0eFaqKARMASZ5Oh7Cmlx4xN80EfpWa91I\r\niGNfnt+EvhWqGnBXeT/uVKMIGjxF6y5GyPRbbLXciKpMQHHcqGcol37SydDw\r\noBkVhJClkCf5CrELGnZUkBUzbhEcJqgqijY=\r\n=oXNK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cgfag","email":"mrdrobitko@outlook.com"},"directories":{},"maintainers":[{"name":"cgfag","email":"mrdrobitko@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-monaco-editor_11.0.0_1665003818157_0.3413124118619173"},"_hasShrinkwrap":false},"11.0.1":{"name":"@cgfag/ngx-monaco-editor","version":"11.0.1","private":false,"description":"Monaco Code Editor for Angular","keywords":["angular","angular 2+","angular 11","monaco","monaco-editor","code","editor","reusable","component"],"repository":{"type":"git","url":"git+https://github.com/atularen/ngx-monaco-editor.git"},"bugs":{"url":"https://github.com/atularen/ngx-monaco-editor/issues"},"license":"MIT","author":{"name":"Atul Kumar"},"contributors":[{"name":"Atul Kumar","email":"atulaggarwal4288@gmail.com"}],"peerDependencies":{"@angular/common":"^11.2.14","@angular/core":"^11.2.14","monaco-editor":"^0.24.0"},"dependencies":{"tslib":"^2.0.0"},"main":"bundles/cgfag-ngx-monaco-editor.umd.js","module":"fesm2015/cgfag-ngx-monaco-editor.js","es2015":"fesm2015/cgfag-ngx-monaco-editor.js","esm2015":"esm2015/cgfag-ngx-monaco-editor.js","fesm2015":"fesm2015/cgfag-ngx-monaco-editor.js","typings":"cgfag-ngx-monaco-editor.d.ts","metadata":"cgfag-ngx-monaco-editor.metadata.json","sideEffects":false,"gitHead":"94138995dd980447314ec8f752d335fe6e72232f","homepage":"https://github.com/atularen/ngx-monaco-editor#readme","_id":"@cgfag/ngx-monaco-editor@11.0.1","_nodeVersion":"16.10.0","_npmVersion":"7.24.0","dist":{"integrity":"sha512-q+XxJ05Pbw/eVGYCJ+ng6vml6gA7SI7yN70W2TpOeGEgDdcAgWkupWqMBcqWZE4J5Kl5Go860YECuyne8FylAQ==","shasum":"71366e401c3878b5bb48da14b413424a8bebe466","tarball":"https://registry.npmjs.org/@cgfag/ngx-monaco-editor/-/ngx-monaco-editor-11.0.1.tgz","fileCount":39,"unpackedSize":220379,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCsSKGS7ckJJL8+IhrzHpc5+d0fWNgQQ89TDu7mKF7JwIhALBzkNa/W/PasMDLI53Ill1XGbntXUEJEB/DtDaqAMmf"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPgspACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhYRAAi5G0I/SFycdEfKW2aswjXLbAiHQx4fE93H44WASu5PvCAvPp\r\nnQSlJ6XLROkIBYjELk5jnvlS4dbUFMg9oldxFYB9srjKC+ZUgWA7pDYDanQc\r\n+mZQp4W6UvdyxyOp74VUzp0qC9xgFxX/Z+KeVzg6ZVFYrEMmuq0wa481JFiV\r\nuwTOE5TMVhjPCvG6RWxziHSv8R3K9eqn99nmshb+xxdSiF6XTgdshLAUvdXR\r\nel0WA0uTYgpQcZmyGKln74vw7IIlsum7IABoU98WVVCyc5QArgTNl511YRPP\r\ngMTOE+k9APGVOvXd0qWNl5cfZ6uc6mVKMkjQZeD67lO8NVaunLsVFjd5ip6E\r\nWvtrq4GzdN6Mp9AjI2neJXxeE+qYItxf64SP4raYmIC6UmdiVT7gJ+J6ejFn\r\n/IEl/+9Rjl/CiPbsBixVB0OzBL8v8FDJhkUOSNotDhH3oFaqRvFSQfBGmLUB\r\njRBLd5s53zgZaXkDqUXAXp81onwn9+4aM5PUWgh91CgT/flHEFite/hObcH9\r\n/19EoaGJU4izc8uCsiHntnBA7V8J7QZQ9nNWzYREjcGgX1BmHf87Ju2PmhlO\r\ntqDl87C+PQq9IB173TtAhFSUENjd6OaHmt33pRfcjfg6n6+i/St4WUY8Y8S4\r\nvRK5Kh51eOo7vgzenhek2AP+Oj42LEJlKbA=\r\n=E5oG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cgfag","email":"mrdrobitko@outlook.com"},"directories":{},"maintainers":[{"name":"cgfag","email":"mrdrobitko@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-monaco-editor_11.0.1_1665010473347_0.5908369641419577"},"_hasShrinkwrap":false},"11.0.2":{"name":"@cgfag/ngx-monaco-editor","version":"11.0.2","private":false,"description":"Monaco Code Editor for Angular","keywords":["angular","angular 2+","angular 11","monaco","monaco-editor","code","editor","reusable","component"],"repository":{"type":"git","url":"git+https://github.com/atularen/ngx-monaco-editor.git"},"bugs":{"url":"https://github.com/atularen/ngx-monaco-editor/issues"},"license":"MIT","author":{"name":"Atul Kumar"},"contributors":[{"name":"Atul Kumar","email":"atulaggarwal4288@gmail.com"}],"peerDependencies":{"@angular/common":"^11.2.14","@angular/core":"^11.2.14","monaco-editor":"^0.27.0"},"dependencies":{"tslib":"^2.0.0"},"main":"bundles/cgfag-ngx-monaco-editor.umd.js","module":"fesm2015/cgfag-ngx-monaco-editor.js","es2015":"fesm2015/cgfag-ngx-monaco-editor.js","esm2015":"esm2015/cgfag-ngx-monaco-editor.js","fesm2015":"fesm2015/cgfag-ngx-monaco-editor.js","typings":"cgfag-ngx-monaco-editor.d.ts","metadata":"cgfag-ngx-monaco-editor.metadata.json","sideEffects":false,"gitHead":"451490b1c0e71d2b006f92727f2c591239c3ae28","homepage":"https://github.com/atularen/ngx-monaco-editor#readme","_id":"@cgfag/ngx-monaco-editor@11.0.2","_nodeVersion":"16.10.0","_npmVersion":"7.24.0","dist":{"integrity":"sha512-FWvi1AsEkYSU1zotGpjW0RQodVDwE79/C7W0hd+RJXmIir7oHqOBhPd5B+B7BGzeahT2sgdq5GglVXXlzl4IfA==","shasum":"29c9d2de03db5ffcdfef79dc2557188aaf5d2970","tarball":"https://registry.npmjs.org/@cgfag/ngx-monaco-editor/-/ngx-monaco-editor-11.0.2.tgz","fileCount":24,"unpackedSize":189907,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2WRavapGElYN3xtxe1FN1hOTLRjvd1VvPY+ynzMfwfQIhAMBJxaG7MJntGuWV/EWqVnsy/ygFb9ZHTcqCbC81tgEC"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSRDCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOxA//URNFPp7AKNXQ8lE6P5mQ8mOdaO6wgGdn2Qmj6MWHB9X6jdrk\r\ncTCBaXXm4DDP4riJyXBQcjufJmjD8fcHJ5YbH8vliAMOMrNtA5hbEhdQU2Oz\r\nR00W3Q+7Ctfis0WnQ77KwjJ4Sw2P0HETg5vHQno1Z4mcrCCgQwIfJGIORV4Z\r\nJhqVprRG4AlrKI9sNBROXAQZ18vC4U7+fUTCEucrXKR+qEqs7fHtwn+bT33p\r\nupr5Rxtegvbn1YmUkmqHGa4MTdlwz48VIXOAYSKX7IjswfI5HlvcMhdo0Vec\r\nOUVFXjymkdK7Mt9dronQ6w4xa8uBhTmufbc2MQ9zIvrVe+aJ3CMYn7PmyM8Z\r\nCvcfMXTGlhSIPHwql4entzb2P5aWjX60whNkZL4Kq2LT0mPJLqnopP6K4O8C\r\ndempl/jNDCAWTK/yHbdVRM5LgF+R7EmOdlG4b9D4xvXcIfOv9Mp2B5cuaupU\r\n20ObU9+NS3NxOVz9ZqwwMN1GIy0QiMLyc6Z6d8zJ2fTxWXfY9ZXiK+1so9iS\r\nmnllqs8hEl13/hDNFeiO9oHqQMKaY1176MDZMnw5XhIPoUN9AOUrLwo+8mNs\r\nOwv4ULfzoRkJboBK6m2saP4oO7WBSX1laZwVQQlKuGmgFiqRZ4wpsUPRYb1i\r\nUwcsEDx/D4xvsdP51S7MrTEY9XsP2DFmaR8=\r\n=nuVl\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cgfag","email":"mrdrobitko@outlook.com"},"directories":{},"maintainers":[{"name":"cgfag","email":"mrdrobitko@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-monaco-editor_11.0.2_1665732802001_0.08633325922023949"},"_hasShrinkwrap":false},"11.0.3":{"name":"@cgfag/ngx-monaco-editor","version":"11.0.3","private":false,"description":"Monaco Code Editor for Angular","keywords":["angular","angular 2+","angular 11","monaco","monaco-editor","code","editor","reusable","component"],"repository":{"type":"git","url":"git+https://github.com/atularen/ngx-monaco-editor.git"},"bugs":{"url":"https://github.com/atularen/ngx-monaco-editor/issues"},"license":"MIT","author":{"name":"Atul Kumar"},"contributors":[{"name":"Atul Kumar","email":"atulaggarwal4288@gmail.com"}],"peerDependencies":{"@angular/common":"^11.2.14","@angular/core":"^11.2.14","monaco-editor":"^0.27.0"},"dependencies":{"tslib":"^2.0.0"},"main":"bundles/cgfag-ngx-monaco-editor.umd.js","module":"fesm2015/cgfag-ngx-monaco-editor.js","es2015":"fesm2015/cgfag-ngx-monaco-editor.js","esm2015":"esm2015/cgfag-ngx-monaco-editor.js","fesm2015":"fesm2015/cgfag-ngx-monaco-editor.js","typings":"cgfag-ngx-monaco-editor.d.ts","metadata":"cgfag-ngx-monaco-editor.metadata.json","sideEffects":false,"gitHead":"536e8b1707e0a8b2836f7ffeef0a6b769ff17354","homepage":"https://github.com/atularen/ngx-monaco-editor#readme","_id":"@cgfag/ngx-monaco-editor@11.0.3","_nodeVersion":"16.10.0","_npmVersion":"7.24.0","dist":{"integrity":"sha512-VYvRu4vQGZshn8dKS2Qv+zDGyKzk8kyKr6y142dwjyWUXI6l4b0BBOY9ieDJtudFdupp/X1DEIBX90WR95XNmw==","shasum":"9c50a5426bcee8d897ed2508a90c7ee4ac9dcb03","tarball":"https://registry.npmjs.org/@cgfag/ngx-monaco-editor/-/ngx-monaco-editor-11.0.3.tgz","fileCount":25,"unpackedSize":198533,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB7QCC3TLzAj9WEEVF8m1x6wpLGUD/dt9SHndpoTGW4rAiBWPS47omLQ2YTNe1zXQqqsnfrXcyX5CXvNo/eZzlH7BQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSS8zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFNQ/9GwzzjZXhePNLlye2+69QW3e0ExvpE7+e8FYMzIx1Y1ufBgNm\r\nFSaBNj7J4vYYPhst72IbAgknCMZZQBUZqS2/M0WBhs3Tazhv68Jb/GUNZGCx\r\nYxC+rwQAE8PkxSYig4k8xFJrgDCeIHAmhuO948/59tC7iT2Yy7F+pGn0dMCr\r\nKZ9Sm4DKUwnxFaH/jg4Oo5qOeuHVutC7Uqmpohs1TpCiBf+0g/eonABD5avQ\r\nfLAU7HNCmZfnqksVlL0cgd/5RmipqVfv3vK0OkjW18JQUMUJRTO3fHdyjv/4\r\n9cXLcaj8DT/NCxcQrOiz5BenGLewSVytZbYjNpGWNd/YcaCPMU+HIWeSg1cY\r\nc8NQgDqFs4tq5CMo18XHidy+XMmmf35WMOvuOb+iQBZDUQ72e9q7q2akD8oa\r\n1TYZHlsIm5tgVOK9giOlbj0bA+7l4thT/jwAHwGULURk+5BmCEiXmQ1pA2tg\r\nG4L1TBq8UEOxTRRgOGDMJOCCnPv/oAEq9c05ju/fDthvzseDnOAdKGPc7riW\r\n9vbzexuvar6Pu9AxDkFH/KDyvS7U86KyJLk46/FFC0TsbjzdnXHK9FIGFy2g\r\nQSPlrNTT4ggJkU8KqtLNQaOjqtcKJWuPGHktsLkHlblOTH0Icu5iROsWI1wV\r\n6AD2mbj+r7BohGC2+Q7+TAqFtyr0IOBj6rA=\r\n=BG9L\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cgfag","email":"mrdrobitko@outlook.com"},"directories":{},"maintainers":[{"name":"cgfag","email":"mrdrobitko@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-monaco-editor_11.0.3_1665740595571_0.668098743477312"},"_hasShrinkwrap":false}},"time":{"created":"2022-10-05T21:03:38.104Z","11.0.0":"2022-10-05T21:03:38.432Z","modified":"2022-10-14T09:43:15.834Z","11.0.1":"2022-10-05T22:54:33.817Z","11.0.2":"2022-10-14T07:33:22.250Z","11.0.3":"2022-10-14T09:43:15.732Z"},"maintainers":[{"name":"cgfag","email":"mrdrobitko@outlook.com"}],"description":"Monaco Code Editor for Angular","homepage":"https://github.com/atularen/ngx-monaco-editor#readme","keywords":["angular","angular 2+","angular 11","monaco","monaco-editor","code","editor","reusable","component"],"repository":{"type":"git","url":"git+https://github.com/atularen/ngx-monaco-editor.git"},"contributors":[{"name":"Atul Kumar","email":"atulaggarwal4288@gmail.com"}],"author":{"name":"Atul Kumar"},"bugs":{"url":"https://github.com/atularen/ngx-monaco-editor/issues"},"license":"MIT","readme":"# Monaco Editor Component for Angular 2 and above.\r\n\r\n - Angular <= 4: ngx-monaco-editor@3.x.x\r\n - Angular 5: ngx-monaco-editor@5.x.x\r\n - Angular 6: ngx-monaco-editor@6.x.x\r\n - Angular 7: ngx-monaco-editor@7.x.x\r\n - Angular 8: ngx-monaco-editor@8.x.x\r\n - Angular 9: ngx-monaco-editor@9.x.x\r\n - Angular 10: ngx-monaco-editor@10.x.x\r\n - Angular 11: v11.x.x\r\n - Angular 12: ngx-monaco-editor@12.x.x\r\n\r\nUsing this Module you can utilize the Monaco Editor as an Angular Component. Feel free to contribute, raise feature requests and make it better.\r\n\r\nSupports all the options available in monaco-editor [Monaco Editor Options](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html)\r\n\r\n## Setup\r\n\r\n### Installation\r\n\r\nInstall from npm repository:\r\n```\r\nnpm install monaco-editor ngx-monaco-editor --save\r\n ```\r\n \r\nFor angular version 6 use v6.x.x\r\n```\r\nnpm install ngx-monaco-editor@6.0.0 --save\r\n ```\r\n \r\nAdd the glob to assets in `.angular-cli.json` schema - `projects.[project-name].architect.build` (to make monaco-editor lib available to the app):\r\n```typescript\r\n{\r\n  \"options\": {\r\n    {\r\n      \"assets\": [\r\n        { \"glob\": \"**/*\", \"input\": \"node_modules/monaco-editor\", \"output\": \"assets/monaco-editor\" }\r\n      ],\r\n      ...\r\n    }\r\n    ...\r\n  },\r\n  ...\r\n}\r\n ```\r\n\r\n\r\nFor Angular 6 and below, add the glob to assets in `angular.json`\r\n```typescript\r\n{\r\n  \"apps\": [\r\n    {\r\n      \"assets\": [\r\n        { \"glob\": \"**/*\", \"input\": \"../node_modules/ngx-monaco-editor/assets/monaco\", \"output\": \"./assets/monaco/\" }\r\n      ],\r\n      ...\r\n    }\r\n    ...\r\n  ],\r\n  ...\r\n}\r\n ```\r\n\r\n### Sample\r\nInclude MonacoEditorModule in Main Module and Feature Modules where you want to use the editor component.(eg: app.module.ts): \r\n```typescript\r\nimport { BrowserModule } from '@angular/platform-browser';\r\nimport { NgModule } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\n\r\nimport { AppComponent } from './app.component';\r\nimport { MonacoEditorModule } from 'ngx-monaco-editor';\r\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    FormsModule,\r\n    MonacoEditorModule.forRoot() // use forRoot() in main app module only.\r\n  ],\r\n  providers: [],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule {\r\n}\r\n```\r\n\r\nCreate Editor options in component.(eg: app.component.ts)\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: './app.component.html'\r\n})\r\nexport class AppComponent {\r\n  editorOptions = {theme: 'vs-dark', language: 'javascript'};\r\n  code: string= 'function x() {\\nconsole.log(\"Hello world!\");\\n}';\r\n}\r\n```\r\nInclude editor in html with options and ngModel bindings.(eg: app.component.html)\r\n```html\r\n<ngx-monaco-editor [options]=\"editorOptions\" [(ngModel)]=\"code\"></ngx-monaco-editor>\r\n```\r\n\r\nInclude diff-editor in html with options.(eg: app.component.html)\r\n```html\r\n<ngx-monaco-diff-editor [options]=\"options\" [originalModel]=\"originalModel\" [modifiedModel]=\"modifiedModel\"></ngx-monaco-diff-editor>\r\n```\r\n```typescript\r\nimport { Component } from '@angular/core';\r\nimport { DiffEditorModel } from 'ngx-monaco-editor';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: './app.component.html'\r\n})\r\nexport class AppComponent {\r\n  options = {\r\n    theme: 'vs-dark'\r\n  };\r\n  originalModel: DiffEditorModel = {\r\n    code: 'heLLo world!',\r\n    language: 'text/plain'\r\n  };\r\n\r\n  modifiedModel: DiffEditorModel = {\r\n    code: 'hello orlando!',\r\n    language: 'text/plain'\r\n  };\r\n}\r\n```\r\n\r\n### Styling\r\nTo match height of container element add height: 100% and wrap in container\r\n```html\r\n<div style=\"height: 500px\">\r\n    <ngx-monaco-editor style=\"height: 100%\" [options]=\"editorOptions\" [(ngModel)]=\"code\"></ngx-monaco-editor>\r\n</div>\r\n```\r\nAdd class to editor tag. (eg. class=\"my-code-editor\")\r\n```html\r\n<ngx-monaco-editor class=\"my-code-editor\" [options]=\"editorOptions\" [(ngModel)]=\"code\"></ngx-monaco-editor>\r\n```\r\nAdd styling in css/scss file:\r\n```scss\r\n.my-code-editor {\r\n  .editor-container {\r\n    height: calc(100vh - 100px);\r\n  }\r\n}\r\n```\r\nSet automaticLayout option to adjust editor size dynamically. Recommended when using in modal dialog or tabs where editor is not visible initially.\r\n\r\n### Events\r\nOutput event (onInit) expose editor instance that can be used for performing custom operations on the editor. \r\n```html\r\n<ngx-monaco-editor [options]=\"editorOptions\" [(ngModel)]=\"code\" (onInit)=\"onInit($event)\"></ngx-monaco-editor>\r\n```\r\n\r\n```typescript\r\nexport class AppComponent {\r\n  editorOptions = {theme: 'vs-dark', language: 'javascript'};\r\n  code: string= 'function x() {\\nconsole.log(\"Hello world!\");\\n}';\r\n  onInit(editor) {\r\n      let line = editor.getPosition();\r\n      console.log(line);\r\n    }\r\n}\r\n```\r\n\r\n## Configurations\r\n`forRoot()` method of MonacoEditorModule accepts config of type `NgxMonacoEditorConfig`.\r\n```typescript\r\nimport { NgModule } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { BrowserModule } from '@angular/platform-browser';\r\n\r\nimport { MonacoEditorModule, NgxMonacoEditorConfig } from 'ngx-monaco-editor';\r\nimport { AppComponent } from './app.component';\r\n\r\nconst monacoConfig: NgxMonacoEditorConfig = {\r\n  baseUrl: 'app-name/assets', // configure base path cotaining monaco-editor directory after build default: './assets'\r\n  defaultOptions: { scrollBeyondLastLine: false }, // pass default options to be used\r\n  onMonacoLoad: () => { console.log((<any>window).monaco); } // here monaco object will be available as window.monaco use this function to extend monaco editor functionalities.\r\n};\r\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    FormsModule,\r\n    MonacoEditorModule.forRoot(monacoConfig)\r\n  ],\r\n  providers: [],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule {\r\n}\r\n```\r\n\r\n### Configure JSON Defaults\r\n`onMonacoLoad` property of `NgxMonacoEditorConfig` can be used to configure JSON default.\r\n```typescript\r\nimport { NgModule } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { BrowserModule } from '@angular/platform-browser';\r\n\r\nimport { MonacoEditorModule, NgxMonacoEditorConfig } from 'ngx-monaco-editor';\r\nimport { AppComponent } from './app.component';\r\n\r\nexport function onMonacoLoad() {\r\n\r\n  console.log((window as any).monaco);\r\n\r\n  const uri = monaco.Uri.parse('a://b/foo.json');\r\n  monaco.languages.json.jsonDefaults.setDiagnosticsOptions({\r\n    validate: true,\r\n    schemas: [{\r\n      uri: 'http://myserver/foo-schema.json',\r\n      fileMatch: [uri.toString()],\r\n      schema: {\r\n        type: 'object',\r\n        properties: {\r\n          p1: {\r\n            enum: ['v1', 'v2']\r\n          },\r\n          p2: {\r\n            $ref: 'http://myserver/bar-schema.json'\r\n          }\r\n        }\r\n      }\r\n    }, {\r\n      uri: 'http://myserver/bar-schema.json',\r\n      fileMatch: [uri.toString()],\r\n      schema: {\r\n        type: 'object',\r\n        properties: {\r\n          q1: {\r\n            enum: ['x1', 'x2']\r\n          }\r\n        }\r\n      }\r\n    }]\r\n  });\r\n\r\n}\r\n\r\nconst monacoConfig: NgxMonacoEditorConfig = {\r\n  baseUrl: 'assets',\r\n  defaultOptions: { scrollBeyondLastLine: false },\r\n  onMonacoLoad\r\n};\r\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    FormsModule,\r\n    MonacoEditorModule.forRoot(monacoConfig)\r\n  ],\r\n  providers: [],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule {\r\n}\r\n```\r\n\r\nNow pass model config of type `NgxEditorModel` to Editor Component\r\n```typescript\r\n@Component({\r\n  selector: 'app-root',\r\n  template: `<ngx-monaco-editor [options]=\"options\" [model]=\"model\"></ngx-monaco-editor>`,\r\n  styles: []\r\n})\r\nexport class AppComponent {\r\n  options = {\r\n    theme: 'vs-dark'\r\n  };\r\n  \r\n  jsonCode = [\r\n    '{',\r\n    '    \"p1\": \"v3\",',\r\n    '    \"p2\": false',\r\n    '}'\r\n  ].join('\\n');\r\n\r\n  model: NgxEditorModel = {\r\n    value: this.jsonCode,\r\n    language: 'json',\r\n    uri: monaco.Uri.parse('a://b/foo.json')\r\n  };\r\n}\r\n```\r\n\r\n## Links\r\n[Monaco Editor](https://github.com/Microsoft/monaco-editor/)<br/>\r\n[Monaco Editor Options](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html)\r\n\r\n## License\r\n\r\nMIT © [Atul Kumar](https://github.com/atularen)\r\n","readmeFilename":"README.md"}