Not Providing Milkshakes

    TypeScript icon, indicating that this package has built-in type declarations

    0.0.11 • Public • Published


    A quick and dirty Angular wrapper for the Ace code editor. Works with or without Angular form models. Loads Ace scripts and themes from a CDN or other URL.


    npm i --save @nowzoo/ngx-ace

    Quick Start

    Import the library into your app...

    import { NgxAceModule } from '@nowzoo/ngx-ace';
    // ...
      imports: [
      bootstrap: [AppComponent]
    export class AppModule { }

    Use the ngx-ace component...

    // my.component.ts
    export class MyComponent  {
      content = 'Hello World';
      editor: any;
      onEditorReady(editor) {
        // editor is an instance of Ace.Editor
        this.editor = editor;
          mode: 'ace/mode/markdown',
          theme: 'ace/theme/github'
    <!-- my.component.html -->
    <div class="my-ace-wrapper">
      <ngx-ace [(ngModel)]="content" (ready)="onEditorReady($event)"></ngx-ace>

    Important note about sizing...

    The ngx-ace component is styled with height: 100%; width: 100%. In order for the ace editor to show up you must wrap the component with an element with a height...

    .my-ace-wrapper {
      height: 400px;
      border: 1px solid #DDD;


    Interface IAceEditorOptions

    The native ace editor options. You can provide a defaults for these options as needed. See INgxAceOptions below.

    mode?: string; // use the full path 'ace/mode/php'
    theme?: string; // use the full path 'ace/mode/php'
    selectionStyle?: 'line' | 'text';
    highlightActiveLine?: boolean;
    highlightSelectedWord?: boolean;
    readOnly?: boolean;
    cursorStyle?: 'ace' | 'slim' | 'smooth' | 'wide';
    mergeUndoDeltas?: boolean | 'always';
    behavioursEnabled?: boolean;
    wrapBehavioursEnabled?: boolean;
    autoScrollEditorIntoView?: boolean;
    copyWithEmptySelection?: boolean;
    useSoftTabs?: boolean;
    navigateWithinSoftTabs?: boolean;
    enableMultiselect?: boolean;
    hScrollBarAlwaysVisible?: boolean;
    vScrollBarAlwaysVisible?: boolean;
    highlightGutterLine?: boolean;
    animatedScroll?: boolean;
    showInvisibles?: boolean;
    showPrintMargin?: boolean;
    printMarginColumn?: number;
    printMargin?: false | number;
    fadeFoldWidgets?: boolean;
    showFoldWidgets?: boolean;
    showLineNumbers?: boolean;
    showGutter?: boolean;
    displayIndentGuides?: boolean;
    fontSize?: number | string;
    fontFamily?: string;
    maxLines?: number;
    minLines?: number;
    scrollPastEnd?: number | boolean;
    fixedWidthGutter?: boolean;
    scrollSpeed?: number;
    dragDelay?:  number;
    dragEnabled?: boolean;
    focusTimeout?: number;
    tooltipFollowsMouse?: boolean;
    firstLineNumber?: number;
    overwrite?: boolean;
    newLineMode?: 'auto' | 'unix' | 'windows';
    useWorker?: boolean;
    tabSize?: number;
    wrap?: boolean|number;
    foldStyle?: 'markbegin' |'markbeginend' | 'manual';

    Interface INgxAceOptions

    An object containing the URL of the cdn (or other location) that you want to load Ace from, and default editor options. You can optionally provide a different set of options with

    // The URL from which Ace will be loaded.
    // Default: ''
    aceURL: string;
    defaultEditorOptions?: IAceEditorOptions;


    The injection token for providing a custom INgxAceOptions. Example...

    import { NgxAceModule,  INgxAceOptions, NGX_ACE_OPTIONS} from '@nowzoo/ngx-ace';
    const aceOptions: INgxAceOptions = {
      aceURL: '/some/path/to/ace',
      defaultEditorOptions: {
        theme: 'ace/theme/chrome'
      imports: [
      providers: [
        {provide: NGX_ACE_OPTIONS, useValue: aceOptions}
      bootstrap: [AppComponent]
    export class AppModule { }

    Service NgxAceService

    A service that takes care of loading the main ace.js script and setting the path for modes and themes. You probably do not need to use this at all.


    • loaded(): Promise<void> Returns a promise that resolves when ace has been loaded on the page.

    Component NgxAceComponent

    selector: 'ngx-ace' | exportAs: 'ngxAce'


    • mode: string Optional. Use only the language name, not the full path: markdown not ace/mode/markdown.
    • theme: string Optional. Use only the name of the theme: chrome, not ace/theme/chrome.


    • ready: EventEmitter<any> Emits the ace editor instance when ace.js has been loaded and the component's editor has been initialized.


    This project was generated with Angular CLI version 7.0.2.

    Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

    Code scaffolding

    Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.


    Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

    Running unit tests

    Run ng test to execute the unit tests via Karma.

    Running end-to-end tests

    Run ng e2e to execute the end-to-end tests via Protractor.

    Further help

    To get more help on the Angular CLI use ng help or go check out the Angular CLI README.


    npm i @nowzoo/ngx-ace

    DownloadsWeekly Downloads






    Unpacked Size

    212 kB

    Total Files


    Last publish


    • chriscarson