Skip to content
Codemirror Wrapper for Angular
TypeScript HTML CSS JavaScript
Branch: master
Clone or download


npm travis codecov



Latest version available for each version of Angular

@ctrl/ngx-codemirror Angular
1.3.10 6.x 7.x
2.0.0 8.x

An Angular component wrapper for CodeMirror that extends ngModel

Based on:

JedWatson/react-codemirror - This project is mostly a port of react-codemirror chymz/ng2-codemirror - Good to reference

Used in:

tsquery playground:


codemirror is a peer dependency and must also be installed

npm install @ctrl/ngx-codemirror codemirror


Import CodemirrorModule and bring in the codemirror files for parsing the langague you wish to use.

In your NgModule:

import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { CodemirrorModule } from '@ctrl/ngx-codemirror';

  // add to imports:
  imports: [

In your main.ts or at the root of your application, see documentation:

import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/markdown/markdown';

Import the base css file and your theme

@import "~codemirror/lib/codemirror";
@import "~codemirror/theme/material";

Use The Component

    lineNumbers: true,
    theme: 'material',
    mode: 'markdown'


All Inputs of ngModel and

  • options - options passed to the CodeMirror instance see
  • name - name applied to the created textarea
  • autoFocus - setting applied to the created textarea
  • preserveScrollPosition - preserve previous scroll position after updating value


All outputs of ngModel and

  • 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



GitHub @scttcper  ·  Twitter @scttcper

You can’t perform that action at this time.