ngb popover not rendering html encoding

Question

I need to render some text inside ngbPopover, I am able to do that.
The problem here is I need a line breaks between text.

I tried using <br>, \\n, \ nothings works for me <br> getting displayed as is and for \\n and \ I see no effect on screen.

following is my code for reference.

html

<ng-template #subCoveragePopup>
   <div class="sub-coverage-tooltip">
      <div class="details">
        <div *ngFor="let subCov of getSubCoverageDescription(quoteCoverage.coverage)">
          <div class="title">{{subCov.code}}</div>
          <div class="">{{subCov.name}}</div>
        </div>
      </div>
   </div>
</ng-template>

inside subCov.name I get the following text through angular ->

Testing: this is line 1\ This is line 2

OR

Testing: this is line \\n This is line 2

OR

Testing: this is line <BR> This is line 2

With all three options, I am not able to display the line break. Is there something I am missing?

Answer 1

Add css style to the same div :

<ng-template #subCoveragePopup>
   <div class="sub-coverage-tooltip">
      <div class="details">
        <div *ngFor="let subCov of getSubCoverageDescription(quoteCoverage.coverage)">
          <div class="title">{{subCov.code}}</div>
          <div class="splitLine">{{subCov.name}}</div>
        </div>
      </div>
   </div>
</ng-template>

.splitLine {
    style="white-space: pre;"
}