https://github.com/giscafer/ngx-ace-tern
Tern plugin for Ace Editor for Angular
https://github.com/giscafer/ngx-ace-tern
ace ace-editor angular brace
Last synced: 9 months ago
JSON representation
Tern plugin for Ace Editor for Angular
- Host: GitHub
- URL: https://github.com/giscafer/ngx-ace-tern
- Owner: giscafer
- License: mit
- Created: 2018-02-09T04:58:12.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2020-05-01T10:21:38.000Z (almost 6 years ago)
- Last Synced: 2025-06-24T02:20:19.149Z (10 months ago)
- Topics: ace, ace-editor, angular, brace
- Language: JavaScript
- Homepage: http://giscafer.github.io/ngx-ace-tern/
- Size: 2.24 MB
- Stars: 8
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ngx-ace-tern
[](https://www.npmjs.org/package/ngx-ace-tern)
Tern plugin for Ace Editor, base on Angular8.x.
[Online Demo](http://giscafer.github.io/ngx-ace-tern/)
default options
```js
enableBasicAutocompletion: true,
enableLiveAutocompletion: true
```
default mode: `javascript`
default theme: `chrome`
# Install
`npm i ngx-ace-tern -S`
## Sample Usage
add scripts `ace-builds` in your `index.html` or `angular-cli.json`.
you also can use [brace](https://github.com/thlorenz/brace) instead of ace-builds.
### eg
#### First
```html
```
or use [brace](https://github.com/thlorenz/brace) to cleaning angular.json:
```ts
import 'brace/index';
import 'brace/mode/markdown';
import 'brace/theme/github';
import 'brace/theme/monokai';
```
#### Second
```ts
import { Component } from '@angular/core';
import { AceEditorDirective } from 'ngx-ace-tern';
@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)` ,`(editorRef)` output. As per Ace, you must also make it a `display: block;` and give it a width and height.
## Related
- [Ace.Tern](https://github.com/sevin7676/Ace.Tern)
# License
MIT
---
> [giscafer.com](http://giscafer.com) ·
> GitHub [@giscafer](https://github.com/giscafer) ·
> Twitter [@nickbinglao](https://twitter.com/nickbinglao) ·
> Weibo [@Nickbing_Lao](https://weibo.com/laohoubin)