Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/scttcper/ngx-codemirror
Codemirror Wrapper for Angular
https://github.com/scttcper/ngx-codemirror
angular codemirror
Last synced: 7 days ago
JSON representation
Codemirror Wrapper for Angular
- Host: GitHub
- URL: https://github.com/scttcper/ngx-codemirror
- Owner: scttcper
- License: mit
- Created: 2018-01-24T07:58:21.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-05-15T04:07:52.000Z (over 1 year ago)
- Last Synced: 2025-01-12T05:05:10.929Z (14 days ago)
- Topics: angular, codemirror
- Language: TypeScript
- Homepage: https://ngx-codemirror.vercel.app
- Size: 3.29 MB
- Stars: 281
- Watchers: 9
- Forks: 47
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - @ctrl/ngx-codemirror - Codemirror Wrapper for Angular. (Table of contents / Third Party Components)
README
# ngx-codemirror [](https://www.npmjs.com/package/@ctrl/ngx-codemirror) [](https://codecov.io/gh/scttcper/ngx-codemirror)
DEMO: https://ngx-codemirror.vercel.app
## Dependencies
Latest version available for each version of Angular
| @ctrl/ngx-codemirror | Angular | Codemirror |
| -------------------- | --------- | ---------- |
| 1.3.10 | 6.x 7.x | 5 |
| 2.2.1 | 8.x | 5 |
| 3.1.3 | 9.x | 5 |
| 4.1.1 | 10.x 11.x | 5 |
| 5.1.1 | 12.x-14x | 5 |
| 6.1.0 | 15.x | 5 |
| current | >= 16.x | 5 |
An Angular component wrapper for [CodeMirror](https://codemirror.net/) that extends ngModel. Based on [JedWatson/react-codemirror](https://github.com/JedWatson/react-codemirror)
##### Used in:
tsquery playground: https://tsquery-playground.firebaseapp.com/
## Install
`codemirror` is a peer dependency and must also be installed
```sh
npm install @ctrl/ngx-codemirror codemirror@5
```
## Use
Import `CodemirrorModule` and `FormsModule` and bring in the [codemirror files for parsing the language](https://codemirror.net/mode/index.html) you wish to use.
In your `NgModule`:
```ts
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { CodemirrorModule } from '@ctrl/ngx-codemirror';
// add to imports:
imports: [
BrowserModule,
FormsModule,
CodemirrorModule,
...
]
```
In your `main.ts` or at the root of your application, see [documentation](https://codemirror.net/mode/index.html):
```ts
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/markdown/markdown';
```
Import the base css file and your [theme](https://codemirror.net/demo/theme.html)
```css
@import '~codemirror/lib/codemirror';
@import '~codemirror/theme/material';
```
Use The Component
```html
```
## Inputs
All Inputs of [ngModel](https://angular.io/api/forms/NgModel#inputs) and
- `options` - options passed to the CodeMirror instance see http://codemirror.net/doc/manual.html#config
- `name` - name applied to the created textarea
- `autoFocus` - setting applied to the created textarea
- `preserveScrollPosition` - preserve previous scroll position after updating value
## Outputs
All outputs of [ngModel](https://angular.io/api/forms/NgModel#outputs) and
- `codeMirrorLoaded` - called when codeMirror instance is initiated
- `focusChange` - called when the editor is focused or loses focus
- `scroll` - called when the editor is scrolled (not wrapped inside angular change detection must manually trigger change detection or run inside ngzone)
- `cursorActivity` - called when the text cursor is moved
- `drop` - called when file(s) are dropped
## License
MIT