title: Angular2 beta Ace editor directive: unable to resize editor so that it's visible
body: <p>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 <a href="https://github.com/hardbyte/angular2-bt-components/blob/master/app/components/markdown/aceEditor.ts" rel="nofollow">https://github.com/hardbyte/angular2-bt-components/blob/master/app/components/markdown/aceEditor.ts</a> . 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: <a href="http://plnkr.co/edit/BYA4oTlyZHLtkqppViHH?p=preview" rel="nofollow">http://plnkr.co/edit/BYA4oTlyZHLtkqppViHH?p=preview</a>. Could anyone give a suggestion?</p>
  
  <p>Here is the directive code:</p>
  
  <pre><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&lt;string&gt;;
  
      set text(s: string) {
          this.editor.setValue(s);
          this.editor.clearSelection();
          this.editor.focus();
      }
  
      constructor(elementRef: ElementRef) {
          this.textChanged = new EventEmitter&lt;string&gt;();
  
          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) =&gt; {
              this.textChanged.next(this.editor.getValue());
          });
      }
  }
  </code></pre>
  
  <p>And here is the app code with its template:</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {AceDirective} from "./ace.directive";
  
  @Component({
    selector: 'my-app',
    providers: [],
    template: `
      &lt;div&gt;
        &lt;h2&gt;Hello {{name}}&lt;/h2&gt;
        &lt;div style="width:400px;height:300px;background-color:#f0f0f0"&gt;
          &lt;ace-editor id="editor"&gt;&lt;/ace-editor&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    `,
    directives: [AceDirective]
  })
  export class App {
    constructor() {
      this.name = 'Angular2';
    }
  }
  </code></pre>