title: Angular2 - Dynamically loading Ace editor
body: <p>I am trying to load ace editor dynamically into my angular2 application at the click of a button but it looks like that ace editor is producing the following error on console:</p>
  
  <blockquote>
    <p>Error: ace.edit can't find div #editor</p>
  </blockquote>
  
  <p>Here is an example code:</p>
  
  <p><strong>main.ts</strong></p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {bootstrap} from 'angular2/platform/browser';
  
  @Component({
    selector: 'app',
    template: `&lt;div [innerHTML]="html" &gt;&lt;/div&gt;
    &lt;button class="btn btn-primary" (click)="addAce()" &gt;Add Ace&lt;/button&gt;`
  })
  class MainApp{
  
    public html = "";
  
    constructor(){}
  
    addAce(){
  
      this.html = "&lt;pre style='height:100vh' id='editor' &gt;&lt;/pre&gt;";
  
      var editor = ace.edit("editor");
      editor.setTheme("ace/theme/twilight");
      editor.getSession().setMode("ace/mode/javascript");
    }
  }
  bootstrap(MainApp);
  </code></pre>
  
  <p>I want this code to work exactly in this position. Why ace editor can't find the id that I am giving to pre tag? I can see <code>editor</code> id in the source code after bootstrapping the app. I re-produced the problem <a href="http://embed.plnkr.co/oCA0IuvRxw603hRDqWMS/" rel="nofollow">here on plunkr</a>. You can monitor the console for the error message. Thanks in anticipation.</p>
  
  <p><strong>Update</strong></p>
  
  <p>I tried doing it this way</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {bootstrap} from 'angular2/platform/browser';
  
  @Component({
    selector: 'app',
    template: `&lt;button class="btn btn-primary" (click)="addAce()" &gt;Add Ace&lt;/button&gt;
    &lt;div&gt;&lt;pre style='height:100vh' id='editor' &gt;&lt;/pre&gt;&lt;/div&gt;`
  })
  class MainApp{
    public aceId = "";
  
    constructor(){}
  
    addAce(){
  
      this.aceId = "editor";
  
      var editor = ace.edit("editor");
      editor.setTheme("ace/theme/twilight");
      editor.getSession().setMode("ace/mode/javascript");
    }
  }
  bootstrap(MainApp);
  </code></pre>
  
  <p>but still no luck.</p>