title: Angular 2 Component inside bootstrap popover
body: <p>Since angular 2 is not coming with a full rich components, I decided to use bootstrap inside angular 2. I know this is not the best idea as it breaks the virtual dome issue, but I have no other solution. The problem that I am having is that angular 2 component will not render inside the popover html. Anyone have a solution for this?</p>
  
  <p>I am looking at the Renderer class and it seems to be the solution for me, but I can not get it to work. Here is some code:</p>
  
  <ul>
  <li><p>My parent component that hold the popover</p>
  
  <pre><code>ngAfterViewInit() {
  // viewChild is updated after the view has been initialized
  
      var elements = jQuery(this.elementRef.nativeElement).find('[data-toggle="popover"]');
      jQuery.each(elements, jQuery.proxy(function(index, element){
              var eventId = jQuery(element).prop('id');
              jQuery(element).popover({ html : true,
                                                  placement: 'top',
                                                  container: 'body',
                                                  content: this.getEventContent(eventId) }); 
      }, this));     
  }
  getEventContent(eventId){
      var selectedEvent = this.getEvent(eventId);
      var button = jQuery('&lt;button type="button" class="btn register"&gt;&lt;/button&gt;');
  
      var angularViewHolder= jQuery('&lt;div&gt;&lt;/div&gt;');
  
      this.renderer.createElement(angularViewHolder[0], 'event-view')
      button.attr('id', eventId);
      return selectedEvent.description + '&lt;br /&gt;' + 
          button[0].outerHTML + angularViewHolder[0].outerHTML;  
  }
  </code></pre></li>
  </ul>
  
  <p>My event-view component that I need to render in the popover</p>
  
  <pre><code>import {Component, View} from 'angular2/core';
  @Component({
      selector: 'event-view',
      template: '&lt;div&gt;Application details for application id: &lt;h1&gt;{{id}}&lt;/h1&gt; will be loaded here!&lt;/div&gt;',
      inputs: ['id']
  })
  
  export class EventView {
      id: string;
      constructor() {
  
      }
  }
  </code></pre>
  
  <p>I think my solution will be at Renderer.renderComponent but I am not sure how can I user it. </p>