ngx Bootstrap manual close button

Question

I'm trying to make a a manual popover close button at the top right of the popover, using ngx-bootstrap. I do know that to add the x button, we would have to make use of &Times from bootstrap.

https://v4-alpha.getbootstrap.com/utilities/close-icon/

However I do not know how to implement it to my title as I am trying to add it to the top right.

 content: string = "content of popover ";
 Title: string = "Title of popover";

 <a [popover]="content" container="body" placement="top" [popoverTitle]="Title" >Making this popover</a>
              

This is the link I'm using. I'm using this example, the template and component.

My plunker basically, to put it simple, I need a X on the top right of the title.

Answer 1

Manage to do it eventually, since popoverTitle only accepts string

<div>
  <ng-template #popoverContent3>
    <div style="font-size:18px; font-family:'Times New Roman'; font-weight:bold;">
      <p>this is a title...
      <button type="button" (click)='pop2.hide()' class="close" aria-label="Close">
      <span aria-hidden="true">&times;</span>
      </button>
      </p>
    </div>
    <div>
     <p>The best looking pop over, with a TITLE!</p>  
    </div>
  </ng-template>
  
  <a  [popover]="popoverContent3" #pop2="bs-popover" placement="right">
   Pop over with title and a x button!
    </a>
</div>

Answer 2

From popover dynamic html docs you can see [popover] accepts html inputs. you can create a desired custom popover content with appropriate style using the ng-template with id eg: #popOverContent and provide the id as input to the [popover] like below.

 <a [popover]= "popOverContent" container="body" placement="right">
   this popover need a x on top
 </a>

 <ng-template #popOverContent>
   <span style="float:right">X</span>
   <p>Popped content.....</p>
 </ng-template>

You can replace these lines in your code for changes

Update:

You already have got the best possible solution in your plnkr demo. X can be placed anywhere by using CSS styles.

<a [popover]="popOverContent" container="body" #pop="bs-popover" 
  placement="right">this popover need a x on top
</a>

<ng-template #popOverContent>
  <button type="button" (click)='pop.hide()' class="close" aria-
  label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Popped content..without title