Angular:Adding BootStrap PopOvers and ToolTips with Dynamic Data to an Ag-Grid Table
I always preferred the ngx-bootstrap npm module for adding any bootstrap component to my Angular Application. The reason being, it doesn’t require adding any Jquery code in the components nor any complex setup.
I am taking a very simple example of displaying a list of authors and the books those authors have written in an Ag-Grid table.I have used this example multiple times in the past and am going to use it again to demonstrate ToolTips and PopOvers :)
Below is the data that we are going to use. Its an array of objects exported from books.ts
Each object describes the type of book, a few authors who have written books in that genre,some information about the author,an image of the author,the books they have written, and the price of each book.
These are our objectives:
- Populate the above data in a Ag-Grid Table as below. We have displayed the BookType and the list of Authors who have written books under that particular BookType. On clicking on a particular author,we are displaying a few books that the author has written.
The focus of the story will not be on how the data is displayed on the table using <ng-template>.This is out of the scope of the story. If you want to understand this concept, you can checkout the below 2 stories.
2. We are displaying an information icon next to each author’s name and also next to each book name. On hovering over the icon next to the author name, we shall display a popover showing few lines about the author and also an image of the author. The popover disappears only when we click somewhere outside the popover.
On clicking on the icon next to the book name,we are displaying a tooltip showing the price of the book. The tooltip disappears when we click on the icon again.
Below are the dependencies installed in the package.json.
This is how we have added PopoverModule and the TooltipModule from the ngx-bootstrap to the application.
Below is a screenshot of the angular.json, where we have imported the bootstrap,jquery and popper.js libraries.
Below is the PopOver Template that we shall apply to the Author Names in the table. The template has the reference popOverIcon. The data passed to this template will be names of the authors, few lines on the author and a url containing the image of the author.
Below is the ToolTip template that we shall apply to each book name. The template has a reference toolTipIcon. The data passed to this template will contain the price of each book.
Now let’s check how these templates will be used in the table. We are using FormArrays and FormGroups to display the table data.
Below is a small snippet taken from the component template where we are using radio buttons next to the Author names in the table.We have passed the template reference popOverIcon to the ngTemplateOutlet property and the data to be displayed in the PopOver in the ngTemplateOutletContext property.
Similarly we have applied the ToolTip template in the below part of the component template where the radio buttons next to the book names are being displayed. We have passed the template reference toolTipIcon to the ngTemplateOutlet property and the data to be displayed in the PopOver in the ngTemplateOutletContext property.
Please check the below link to see the entire working example.
