CODEWITHSUNDEEP
angularng-bootstrap
Karu
Karu

Reputation: 1005

New line for ngbpopover text

I am using angular 2 and ng bootstrap popover feature. Following is my html. I have infoIconText variable that has some new line \n character. However I am still unable to see the new line when I see the popover text. How can I style the popover text? Any suggestions?

<i class="fa fa-info-circle" ngbPopover="{{infoIconText}}" triggers="mouseenter:mouseleave" aria-hidden="true"></i>

My infoIconText is as follows:

this.infoIconText = "This is line 1." +
      "\nThis is line2";

Upvotes: 5

Views: 2988

Answers (1)

Karu
Karu

Reputation: 1005

I was able to solve this issue by creating a template and referencing that template.

<ng-template #popContent>Line1<br>Line2</ng-template>

<i class="fa fa-info-circle info-icon-background popover-content" [ngbPopover]="popContent" placement="top" triggers="mouseenter:mouseleave" aria-hidden="true"></i>

Upvotes: 7

Related Questions