title: Does angular2 bootstrap have a way to dynamically target elements like it does in angular 1.x
body: <p>Assuming we were to add some DOM elements at runtime:</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>var element = document.createElement('app');
  element.id = 'app1';
  document.getElementsByTagName('body')[0].appendChild(element);
  
  var element2 = document.createElement('app');
  element2.id = 'app2';
  document.getElementsByTagName('body')[0].appendChild(element2);
  </code></pre>
  
  <p>Angular 1.x <code>bootstrap</code> method can target a specific DOM element, so you can  bootstrap Angular on them:</p>
  
  <pre class="lang-js prettyprint-override"><code>angular.bootstrap(element, ['myApp']);
  angular.bootstrap(element2, ['myApp']);
  </code></pre>
  
  <p>In Angular2 the <code>bootstrap</code> method takes in a <code>Component</code> instead of an element and uses the component's <code>selector</code> to locate an element to bootstrap, which (as of build <strong>2.0.0-alpha.26</strong>) only bootstraps the first match it finds:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, bootstrap } from 'angular2/angular2';
  
  @Component({ selector: 'app' })
  export class MyApp { }
  bootstrap(MyApp);
  </code></pre>
  
  <p>So that being said, does anyone know if there is a way (or going to be a way) to bootstrap similar to 1.x, allowing you to dynamically apply angular to elements on the fly?</p>