2

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.

user1892775
  • 2,001
  • 6
  • 37
  • 58

1 Answers1

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)

JoxieMedina
  • 843
  • 1
  • 13
  • 20
  • JoxieMedina, One issue is that item does not have a property which represents the content and I cannot change change that object/interface to add one. Some content need to be created specific to the item and displayed in the popover. Do you know how can I can display such content if its not a directly a property on item? – user1892775 Sep 03 '17 at 15:42
  • @user1892775 I modified my answer , check it out – JoxieMedina Sep 03 '17 at 16:06
  • JoxieMedina, I had tried like this and printed a console.log in controller in this method. It seem to be called endless number of times on page load. And, when I click on one image (out of 14 images), it invokes that method for all 14 images and twice for each image. Not sure why – user1892775 Sep 03 '17 at 16:17
  • However, the content displayed on popover is correct (the one expected for the image clicked), but why so many calls to the method like I mentioned above? Is that normal? Also, I get popover only on click. I want to get it onHover and tried: [popoverOnHover]="true", but that doesnt work – user1892775 Sep 03 '17 at 16:31
  • JoxieMedina, I used triggers="mouseenter:mouseleave" and it works for hover. But, I am still unsure about why sooo many calls to the method like I explained above – user1892775 Sep 03 '17 at 16:41
  • Yes is normal, don't print anything keep it simple with the `return` and with the input `[popoverOnHover]` try `[popoverOnHover]="'true'"` note the ' inside of the " – JoxieMedina Sep 03 '17 at 16:43
  • My popover needs to have lot of information on it. Several fields, images and probably need to use a bootstrap grid also to put some of the contents. Assuming that it can be really huge, is there a better way to build this content (like in HTML template) instead of having to build all that HTML content in the controller for the given scenario explained? – user1892775 Sep 03 '17 at 17:18
  • You can build a helper class with a method that return all the html with the item passed as parameter – JoxieMedina Sep 03 '17 at 17:33