https://github.com/seiyria/ng2-ace

A basic ace editor directive for angular 2.
https://github.com/seiyria/ng2-ace

ace ace-editor angular2 ng2

Last synced: about 1 month ago
JSON representation

A basic ace editor directive for angular 2.

• Host: GitHub
• URL: https://github.com/seiyria/ng2-ace
• Owner: seiyria
• License: mit
• Archived: true
• Created: 2016-05-04T19:24:44.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-03-22T12:19:10.000Z (over 7 years ago)
• Last Synced: 2024-10-01T06:25:41.265Z (2 months ago)
• Topics: ace, ace-editor, angular2, ng2
• Language: JavaScript
• Size: 10.7 KB
• Stars: 31
• Watchers: 6
• Forks: 128
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-angular - ng2-ace - A basic ace editor directive for angular 2. (Uncategorized / Uncategorized)
• awesome-angular-components - ng2-ace - A basic ace editor directive for angular 2. (Uncategorized / Uncategorized)

README

        
# ng2-ace

A basic ace editor directive for angular 2.

# Install

`npm i -s ng2-ace`

# Sample Usage

```js

import { Component } from 'angular2/core';

import { AceEditorDirective } from 'ng2-ace';

import 'brace/theme/clouds';

import 'brace/mode/sql';

@Component({

  directives: [AceEditorDirective],

  template: `

  


  `

})

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.