Angular Ace Wrapper

This is an Angular wrapper library for the Ace. To use this library you should get familiar with the Ace documentation as well since this documentation only explains details specific to this wrapper.

Quick Links

Example application | StackBlitz example | Ace documentation

Building the library

1npm install
2npm run build

Running the example

1npm install
2npm run start

Installing and usage

1npm install ngx-ace-wrapper --save

Load the module for your app (with global configuration):

Providing the global configuration is optional and when used you should only provide the configuration in your root module.

1import { AceModule } from 'ngx-ace-wrapper';
2import { ACE_CONFIG } from 'ngx-ace-wrapper';
3import { AceConfigInterface } from 'ngx-ace-wrapper';
4
5const DEFAULT_ACE_CONFIG: AceConfigInterface = {
6};
7
8@NgModule({
9  ...
10  imports: [
11    ...
12    AceModule
13  ],
14  providers: [
15    {
16      provide: ACE_CONFIG,
17      useValue: DEFAULT_ACE_CONFIG
18    }
19  ]
20})

Use it in your HTML template (with custom configuration):

This library provides two ways to create a Ace element, component for simple use cases and directive for more custom use cases.

COMPONENT USAGE

Simply replace the element that would ordinarily be passed to Ace with the ace component.

You also need to import brace and the used mode(s) and theme(s):

1import 'brace';
2import 'brace/mode/text';
3import 'brace/theme/github';

1<ace [config]="config" [mode]="'text'" [theme]="'github'" [(value)]="value"></ace>

1[config]                     // Custom config to override the global defaults.
2
3[mode]                       // Mode for the editor (import mode manually!).
4[theme]                      // Theme for the editor (import theme manually!).
5[value]                      // Input value of the ace editor content (text).
6[disabled]                   // Disables all functionality (focus & editing).
7
8[useAceClass]                // Use ace class (use provided default styles).
9
10(valueChange)                // Event handler for the input value change event.

DIRECTIVE USAGE

You need to always import brace and the used mode(s) and theme(s):

1import 'brace';
2import 'brace/mode/text';
3import 'brace/theme/github';

Ace directive can be used in correctly structured div element with optional custom configuration:

1<div class="ace" [ace]="config">text</div>

1[ace]                        // Custom config to override the global defaults.
2
3[disabled]                   // Disables all functionality (focus & editing).

Available configuration options (custom / global configuration):

1mode                         // Mode for the editor (import mode manually!).
2theme                        // Theme for the editor (import theme manually!).
3
4wrap                         // Sets text wrapping to be enabled or disabled.
5tabSize                      // Size in spaces of the soft tabs (Default: 4).
6
7showPrintMargin              // Sets showing of the print margin (Default: false).
8printMarginColumn            // Sets the column where the print margin should be.

For more detailed documentation with all the supported config options see the Ace documentation.

Available control / helper functions (provided by the directive):

1ace()                        // Returns the Ace instance reference for full API access.
2
3clear()                      // Clears the editor document and resets text selection.
4
5getValue()                   // Returns the current text value of the editor document.
6
7setValue(value, cursorPos?)  // Text value for the editor document. Cursor position:
8                             // 0 = select all, -1 = document start, 1 = document end.

Above functions can be accessed through the directive reference (available as directiveRef in the component).