Come utilizzare Bootstrap Popover con Angular2

Question

Sto cercando di ottenere un popover Bootstrap 3 per visualizzare un modello interpolato Angular 2. È possibile? Ecco quello che ho finora:

$('.ba-header--user-menu').popover({ 
     placement: 'bottom', 
     toggle: 'popover', 
     trigger: 'focus', 
     html: true, 
     content: '{{user.email}}' 
    }); 

Il che mi dà questo:

Answer 1

Sì questo è possibile, ma non si può chiamare simbolo interpoleted nel plugin jQuery il modo in cui si sta facendo. devi assegnare la tua email dinamica direttamente usando this in questo modo.

ngOnInit(){ 
    $('#abc').popover({ 
     placement: 'bottom', 
     toggle: 'popover', 
     title: 'khcksahkdfs' 
     html: true, 
     content: this.name 
    }); 
} 

<a id="abc">Toggle popover</a> 

lavoro Demo here

Answer 2

JQuery e angolare non giocare molto bene insieme. Installare ng2-popover:

npm i ng2-popover 

e usarlo in questo modo:

<span popover="content to be shown in the popover"> 
    element on which this popover is applied. 
</span> 

Answer 3

Si può anche provare una libreria ho pubblicato ng2-pop-over (da non confondere con NG2-popover di cui sopra). È compatto e dovrai aggiungere i tuoi stili ma ha quello che serve per risolvere il tuo problema senza jQuery.