An ace editor directive for angular.

Usage no npm install needed!

<script type="module">
  import ngAce from '';



npm package

A basic ace editor directive for angular2\angular4\agnular5. base on @seiyria/ng2-ace

Online Demo see

default options

      enableBasicAutocompletion: true,
      enableLiveAutocompletion: true

default mode: javascript

default theme: chrome


npm i ng-ace

Sample Usage

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

import { AceEditorDirective } from 'ng-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) ,(editorRef) output. As per Ace, you must also make it a display: block; and give it a width and height.