Ace editor integration with typescript for angular 4+.
npm install angular-ace-editor
Ace editor integration with typescript for angular 2.
npm i -S ng2-ace-editor> Minimal
``js
//add "AceEditorDirective" to your modules list
import { Component } from '@angular/core';
@Component({
template:
})
export class MyComponent {
text:string = "";
}
> Complete
js
//add "AceEditorDirective" to your modules list
//import { AceEditorDirective } from 'ng2-ace-editor';import { Component } from '@angular/core';
//to use theme "eclipse"
//with angular-cli add "../node_modules/ace-builds/src-min/ace.js"
//and "../node_modules/ace-builds/src-min/theme-eclipse.js" to "scripts" var into the file angular-cli.json
@Component({
template:
})
export class MyComponent {
text:string = "";
options:any = {maxLines: 1000, printMargin: false};
onChange(code) {
console.log("new code", code);
}
}
Use Component
js
//add "AceEditorComponent" to your modules list
//import { AceEditorComponent } from 'ng2-ace-editor';import {Component, ViewChild} from '@angular/core';
//to use theme eclipse
//with angular-cli add "../node_modules/ace-builds/src-min/ace.js"
//and "../node_modules/ace-builds/src-min/theme-eclipse.js" to "scripts" var into the file angular-cli.json
@Component({
template:
})
export class AceCmp {
@ViewChild('editor') editor;
text: string = ""; ngAfterViewInit() {
this.editor.setTheme("eclipse");
this.editor.getEditor().setOptions({
enableBasicAutocompletion: true
});
this.editor.getEditor().commands.addCommand({
name: "showOtherCompletions",
bindKey: "Ctrl-.",
exec: function (editor) {
}
})
}
}
Use AOT (thx Geschan)
js
// other imports
import { AceEditorModule } from 'ng2-ace-editor';@NgModule({
imports: [
// ...
AceEditorModule
],
declarations: [ ],
providers: [ ]
})
export class AppModule {
}
``