CODEWITHSUNDEEP
angularace-editor
Naftis
Naftis

Reputation: 4559

Angular2 beta Ace editor directive: unable to resize editor so that it's visible

I'm starting to play with Angular2 Beta. I'd like to use the Ace editor in my app, so I slightly adapted as a base for a directive the code from https://github.com/hardbyte/angular2-bt-components/blob/master/app/components/markdown/aceEditor.ts . As far as I can tell from debugging, the directive code correctly gets its reference to the Ace editor and no error is logged. Yet, the editor is always displayed with a minimal size (2x16 px), despite my attempts to resize it, from either code or CSS. You can find a repro here: http://plnkr.co/edit/BYA4oTlyZHLtkqppViHH?p=preview. Could anyone give a suggestion?

Here is the directive code:

import {Component,Directive,EventEmitter,ElementRef} from 'angular2/core';

declare var ace: any;

@Directive({
    selector: 'ace-editor',
    inputs: [
        "text"
    ],
    outputs: [
        "textChanged"
    ]
})
export class AceDirective { 
    private editor;
    public textChanged: EventEmitter<string>;

    set text(s: string) {
        this.editor.setValue(s);
        this.editor.clearSelection();
        this.editor.focus();
    }

    constructor(elementRef: ElementRef) {
        this.textChanged = new EventEmitter<string>();

        let el = elementRef.nativeElement;
        el.classList.add("editor");
        el.style.height = "250px";
        el.style.width = "300px";
        this.editor = ace.edit(el);
        this.editor.resize(true);
        //this.editor.setTheme("ace/theme/monokai");
        //this.editor.getSession().setMode("ace/mode/xml");

        this.editor.on("change", (e) => {
            this.textChanged.next(this.editor.getValue());
        });
    }
}

And here is the app code with its template:

import {Component} from 'angular2/core';
import {AceDirective} from "./ace.directive";

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div style="width:400px;height:300px;background-color:#f0f0f0">
        <ace-editor id="editor"></ace-editor>
      </div>
    </div>
  `,
  directives: [AceDirective]
})
export class App {
  constructor() {
    this.name = 'Angular2';
  }
}

Upvotes: 0

Views: 1478

Answers (1)

Poul Kruijt
Poul Kruijt

Reputation: 71961

You need to give the #editor a display:block style. Or place it in a div and use the attribute selector. Custom elements are rendered as display:inline. And you cannot resize an inline element

Solution 1: (css)

#editor {
  display : block;
}

Solution 2: (attr)

(camel case attribute directives are the standard now in angular2)

app.ts:

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div style="width:400px;height:300px;background-color:#f0f0f0">
        <div aceEditor id="editor"></div>
      </div>
    </div>
  `,
  directives: [AceDirective]
})

ace.directive.ts:

@Directive({
    selector: '[aceEditor]',
    inputs: [
        "text"
    ],
    outputs: [
        "textChanged"
    ]
})

Upvotes: 1

Related Questions