1

The Angular version of a Bootstrap Popover component is described at https://ng-bootstrap.github.io/#/components/popover/examples . The example used for using using HTML in the popover is: 

<ng-template #popContent>Hello, <b>{{name}}</b>!</ng-template>

This is fine if you are specifying the HTML formatting in the HTML, but doesn't work if you are providing the HTML from a TypeScript method, for example to import it from a server:

<ng-template #popContent>{{getMyHtmlFromTheServer()}}</ng-template>

The HTML code shows up in the popover. It would be good if the documentation gave such an example.

Mickey Segal
  • 841
  • 1
  • 10
  • 21
  • Possible duplicate of [Angular HTML binding](https://stackoverflow.com/questions/31548311/angular-html-binding) – ConnorsFan May 14 '18 at 21:42
  • My comment was primarily aimed at enhancing the ng-bootstrap documentation with information that is non-obvious from that documentation and is a very common use case. – Mickey Segal May 16 '18 at 12:35

1 Answers1

2

The following code allows you to use HTML code provided by a TypeScript method:

<ng-template #popContent><div [innerHTML]="getMyHtmlFromTheServer()"></div></ng-template>
Mickey Segal
  • 841
  • 1
  • 10
  • 21