Skip to content
A basic ace editor directive for angular 2.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
src add editorRef output Jun 14, 2016
.gitignore Initial commit May 4, 2016
LICENSE add readOnly option May 23, 2016


A basic ace editor directive for angular 2.


npm i -s ng2-ace

Sample Usage

import { Component } from 'angular2/core';

import { AceEditorDirective } from 'ng2-ace';

import 'brace/theme/clouds';
import 'brace/mode/sql';

  directives: [AceEditorDirective],
  template: `
  <div ace-editor
       style="display:block; height: 80vh; width:100%"></div>
export class MyComponent {
  constructor() {
    this.text = 'test';
    this.options = { printMargin: false };
    this.onChange = (data) => {

Important pieces to note in the HTML template: [ace-editor] attribute, [text], [theme], [mode], [readOnly], [options] inputs, (textChanged) output. As per Ace, you must also make it a display: block; and give it a width and height.

You can’t perform that action at this time.