seiyria / ng2-ace

A basic ace editor directive for angular 2.

ng2-ace

A basic ace editor directive for angular 2.

Install

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';

@Component({
  directives: [AceEditorDirective],
  template: `
  <div ace-editor
       [text]="text"
       [mode]="'sql'"
       [theme]="'clouds'"
       [options]="options"
       [readOnly]="false"
       (textChanged)="onChange($event)"
       style="display:block; height: 80vh; width:100%"></div>
  `
})
export class MyComponent {
  constructor() {
    this.text = 'test';
    this.options = { printMargin: false };
    this.onChange = (data) => {
      console.log(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.

ng2-ace's Issues

Missing typescript definitions

Hi! Could there be a possibility of adding typescript definitions so the ng2-ace module plays nicely with Angular2/Typescript? Thanks!

Enable Extensions

Hi,

How do we enable ext. like spellcheck?

Thanks.

Enable Extensions

Hi,

How do we enable ext. like spellcheck?
When I use "spellcheck" true in the option, I get the following error
misspelled option "spellcheck"

Thanks.

Unexpected value 'AceEditorDirective . Please add a @Pipe/@Directive/@Component annotation in Angular 4

It works perfect with ng serve! BUT,
If I try,
ng build --prod
I get this error:
ERROR in Unexpected value 'AceEditorDirective in C:/dpdtest/node_modules/ng2-ace/index.js' declared by the module 'codeuiModule in C:/dpdtest/public/app/eui.module.ts'. Please add a @Pipe/@Directive/@component annotation.

ERROR in ./public/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'C:\dpdtest\public'
@ ./public/main.ts 5:0-74
@ multi ./public/main.ts

======================== Same posted at angular/angular#15890

How to show the Auto completion data from server API

Hi Folks,

Can we show the autocomplete values from server API rather than the default one? I would like to add some more string token into the auto popluation values. How can we do it in angular

version 1.2.3 of ace throws warning

index.js:3543 Automatically scrolling cursor into view after selection change this will be disabled in the next version set editor.$blockScrolling = Infinity to disable this message