How to add innerHTML or Multi line text to NgbPopover

I was trying to show multi line text on Popover and want to format my display contain as I want using HTML tag. text construction has to be done in .ts file.

I achieved this in following way.

Label where, on mouseover I want to show popover with employee detail data.

I want when use mouseover then popover display and if user click outside or click “esc” then popover disappears. You can also use moverover and mouse leave using triggers="mouseenter:mouseleave"

npm install --save @ng-bootstrap/ng-bootstrap

app.module.ts

//Popover- menu item

import { NgbPopoverModule, NgbModalModule, NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({imports: [NgbPopoverModule]})

Employee.html file 

 <label id="EmployeeProfile" class="readmore-p"           

            name="EmployeeProfile "

(mouseover)="getEmployeeProfileData()"

            [ngbPopover]="ShowEmployeeProfile" 

popoverTitle="Employee Detail Profile"

            triggers="mouseenter" [autoClose]="'outside'">
</label>

 <ng-template #ShowEmployeeProfile >

 <div[innerHtml]="employeeDetailDataForToolTip"</div>
</ng-template>

Employee.ts file

employeeDetailDataForToolTip: string ="";

getEmployeeProfileData(): string

{
this.employeeDetailDataForToolTip="";
this.employeeDetailDataForToolTip+='<ul><u>Ritesh Kesharwani</u>';
this.employeeDetailDataForToolTip+='<li>Address: Mile City, USA</lt;li>';
this.employeeDetailDataForToolTip+='<li> Department: Education</li>';
this.employeeDetailDataForToolTip+='<li> Salary: $300000</li>';
this.employeeDetailDataForToolTip+='<li> Base Location: MN</li></ul>'
}

If you want scroll bar on Popover then you need to override style sheet
.popover {

  max-width: 500px !important;

  background: #F9F9F9 !important;

  max-height: 400px !important;

  overflow: scroll !important;

}

sample pop over on label mouse over 

During Test Debug control not hits to the break points + Not able to debug test case

Go to the project property > Build and Uncheck following

• Allow unsafe code
• Optimize Code

 And Select Platform target: Any CPU

Error: testhost.x86.exe' has exited with code 0 (0x0).

Error: testhost.x86.exe' has exited with code 0 (0x0).

After my research I found, below nuget package was missing from my project.

I have installed below and it resolved the issue.

MSTest.TestFramework

Make sure following package are installed in your test project

MSTest.TestFramework And MSTest.TestAdapter

Render Date field in specific Date Format into ag-Grid Angular 6

In you ag-Grid if you want to display date field in specific format do the following steps

1. npm Install moment --save
2. in your .ts file use below

 import * as moment from 'moment';

columnDefs =

[{

headerName: 'Effective Start Date', field: 'EffectiveStartDate',

cellRenderer: (data) => {

return  data.value ? (moment(data.value).format('MM/DD/YYYY')) : '';}

}];

For more info on moment please use https://momentjs.com/

Add hyperlink click event into ag-Grid Angular 6

I had spent lots of time to figure how to add hyperlink into ag-grid column and how to call function executed at on click event. This was looking very difficult but later it came with very simple solution.

My requirement was to add hyperlink on Grid column with the rendered data, so no button where we have static word like “Add” etc.

Simple solution I could figure out is to add cellClicked event

.html page

<ag-grid-angular

    (cellClicked)='onCellClicked($event)'>

</ag-grid-angular>

And when cellClicked   by user execute Type Script function

.ts page

onViewCellClicked(event: any)

  {

    if (event.column.colId =="FirstName" ) // only first column clicked

    {

      // execute the action as you want here in on click of hyperlink

    }

// here you can add multiple if statement based on colId to do the action      //on cell clicked

  }

Your column definition as below

columnDefs = [{

headerName: 'First Name', field: 'FirstName', suppressMenu: false, unSortIcon: true, width:150,

      cellRenderer: function(params) {

        // below line is just to create empty without any action hyperlink

// to trick the user, but actual action happen onViewCellCliced() // function

        return '<a href="#">' + params.value + '</a>';

            },

            tooltipField: "FirstName", headerTooltip: "First Name"     

      }];