# ngx-monaco

> Monaco Editor for Angular

Latest version **0.8.0** (published 2018-05-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-monaco
pnpm add ngx-monaco
yarn add ngx-monaco
bun add ngx-monaco
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.8.0 |
| Published | 2018-05-08 |
| First published | 2017-12-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=6 |
| Dependencies | 1 |
| Unpacked size | 320.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 39 |
| Author | Sam Verschueren |
| Maintainers | samverschueren |
| Keywords | angular, ng, monaco, editor, monaco-editor, vscode, vs |

## Links

- npm: https://www.npmjs.com/package/ngx-monaco
- Repository: https://github.com/SamVerschueren/ngx-monaco
- Homepage: https://github.com/SamVerschueren/ngx-monaco#readme
- Issues: https://github.com/SamVerschueren/ngx-monaco/issues
- npm.io page: https://npm.io/package/ngx-monaco

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Alternatives

- [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads
- [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads
- [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads
- [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads
- [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads

## Recent versions

- 0.8.0 (latest) — 2018-05-08
- 0.7.0 — 2018-04-11
- 0.6.1 — 2018-01-19
- 0.6.0 — 2018-01-08
- 0.5.2 — 2017-12-28
- 0.5.1 — 2017-12-27
- 0.5.0 — 2017-12-27
- 0.4.0 — 2017-12-25
- 0.3.1 — 2017-12-24
- 0.3.0 — 2017-12-22
- 0.2.0 — 2017-12-13
- 0.1.0 — 2017-12-11

## README

# ngx-monaco

> [Monaco Editor](https://github.com/Microsoft/monaco-editor) for Angular

You can easily run the [example](example) locally.

## Install

```
$ npm install monaco-editor ngx-monaco
```

> Note: The `monaco-editor` package is a peer dependency of this package.

### angular.json

Add the following lines to the app `assets` array in `angular.json`.

```json
{
	"glob": "**/*",
	"input": "./node_modules/monaco-editor/min/vs",
	"output": "libs/vs"
}
```

Because of some technical reasons, it's not possible to package the `monaco-editor` together with all the other packages. This module will dynamically load and instantiate the monaco editor.


## Usage

Import the `MonacoEditorModule`.

```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MonacoEditorModule } from 'ngx-monaco';

@NgModule({
	declarations: [
		AppComponent
	],
	imports: [
		BrowserModule,
		MonacoEditorModule.forRoot()
	],
	bootstrap: [AppComponent]
})
export class AppModule { }
```

Now you're ready to render the editor on your screen.

```ts
import { Component } from '@angular/core';

@Component({
	selector: 'app-root',
	styles: ['monaco-editor { height: 500px; display:block; }'],
	template: `
		<monaco-editor></monaco-editor>
	`
})
export class AppComponent { }
```

### Files

```ts
import { Component } from '@angular/core';
import { MonacoFile } from 'ngx-monaco';

@Component({
	selector: 'app-root',
	styles: ['monaco-editor { height: 500px; display:block; }'],
	template: `
		<monaco-editor
			theme="vs-dark"
			[file]="file"
			(fileChange)="onFileChange($event)">
		</monaco-editor>
	`
})
export class AppComponent {
	file: MonacoFile = {
		uri: 'index.js',
		language: 'javascript',
		content: `console.log('hello world');`
	};

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

> You can use the `(fileChange)` event to listen to changes in the file.

### Completion providers

The completion item provider interface defines the contract between extensions and the [IntelliSense](https://code.visualstudio.com/docs/editor/intellisense).

```ts
import { Injectable } from '@angular/core';
import { CompletionItemProvider } from 'ngx-monaco';

@Injectable()
export class TravisCompletionProvider implements CompletionItemProvider {
	get language() {
		return 'yaml';
	}

	provideCompletionItems(model: monaco.editor.IReadOnlyModel): any {
		const filename = model.uri.path.split('/').pop();

		if (filename !== '.travis.yaml') {
			return [];
		}

		return [
			{
				label: 'language',
				kind: monaco.languages.CompletionItemKind.Property,
				documentation: 'Set the language',
				insertText: 'language: '
			}
		]
	}
}
```

> You can play around with completion providers in the [Monaco Playground](https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-completion-provider-example).

Register the completion provider in your module.

```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MonacoEditorModule, COMPLETION_PROVIDERS } from 'ngx-monaco';

import { TravisCompletionProvider } from './providers/travis-completion.provider';

@NgModule({
	declarations: [
		AppComponent
	],
	imports: [
		BrowserModule,
		MonacoEditorModule.forRoot()
	],
	providers: [
		{ provide: COMPLETION_PROVIDERS, useClass: TravisCompletionProvider, multi: true }
	]
	bootstrap: [AppComponent]
})
export class AppModule { }
```

## Development

Run the [example](example) locally. Make changes directly in the `src` directory and start the example again. It will automatically build the library before it starts the application.


## Related

- [monaco-editor](https://github.com/Microsoft/monaco-editor) - A browser based code editor


## License

MIT © [Sam Verschueren](https://github.com/SamVerschueren)

---
_Source: https://npm.io/package/ngx-monaco · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._