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