Angular 2 Component inside bootstrap popover

Question

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?

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:

• My parent component that hold the popover

  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('<button type="button" class="btn register"></button>');
  
      var angularViewHolder= jQuery('<div></div>');
  
      this.renderer.createElement(angularViewHolder[0], 'event-view')
      button.attr('id', eventId);
      return selectedEvent.description + '<br />' + 
          button[0].outerHTML + angularViewHolder[0].outerHTML;  
  }
  

My event-view component that I need to render in the popover

import {Component, View} from 'angular2/core';
@Component({
    selector: 'event-view',
    template: '<div>Application details for application id: <h1>{{id}}</h1> will be loaded here!</div>',
    inputs: ['id']
})

export class EventView {
    id: string;
    constructor() {

    }
}

I think my solution will be at Renderer.renderComponent but I am not sure how can I user it.

Answer 1

You could just simply

initialize a normal bootstrap popover like this

let popOver = $('[rel="popover"]');

popOver.popover({
    container: 'body',
    html: true,
    content: function () {
        return $('#myContent').removeClass('hide');
    }
}).click(function(e) {
    e.preventDefault();
});

popOver.on('show.bs.popover', (event) => {
    this.popover_initialized = true;
});

popOver.on('hide.bs.popover', (event) => {
    $(".popover[role=tooltip]").addClass('hide');

    event.preventDefault();
    event.stopImmediatePropagation();
});

then you just define a function to be called on the element that activates the popover

showToolTip(){
    if(!this.popover_initialized){
        return;
    }

    $(".popover[role=tooltip]").removeClass('hide');
}

So, the first time bootstrap initializes a normal popover, but we prevent the default of destroying the html content when it hides, then you simply add a 'hide' class to it, and then when you whant to activate it again you just simply remove that class, this works for angular directives, bindings, etc