Display popover with contents specific to the image clicked from a list of images displayed

Question

I am using Angular 2 for my project. I came across library: http://valor-software.com/ngx-bootstrap/#/popover to display popover when clicking on an item. Basically I have several images displayed on the page using the ngFor loop as follows:

<span *ngFor="let item of items;">
    <img class="itemClass" [src]="item.image"                         
</span>

where items is the array returned from the controller class.

Now, for each image displayed above, when I hover, I want to display a popover and the content to be displayed on the corresponding popover depends on various values stored in item object above. How do I achieve this? The popup contents need to be very specific to the 'item' object which is for the specific image clicked.

The examples in the link above does not seem to give information on how to display data in the popover based on the specific item clicked from a list of items.

Answer 1

According to the documentation http://valor-software.com/ngx-bootstrap/#/popover#dynamic-content this should works:

 <span *ngFor="let item of items;">
  <img class="itemClass" [popover]="getItemContent(item)" [popoverTitle]="getItemTitle(item)" [src]="item.image"                         
</span>

And in the controller:

getItemContent(item){return `The content is ${item.someProp} some other text`}

and do the same for the method getItemTitle(item)