CODEWITHSUNDEEP
angularbootstrap-4bootstrap-modalng-bootstrap
Reshma
Reshma

Reputation: 502

How to pass dynamic HTML tag to a bootstrap modal?

Consider a component common-dialog 

<div class="modal-header">
    <h4 class="modal-title">  {{heading}}  </h4>
    <button type="button" class="close" aria-label="Close"  ">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <div class="modal-body">
    BODY COMES HERE
  </div>

  <div class="modal-footer">
     FOOTER COMES HERE
  </div>


const modalRef = this.modalService.open(CommonDialogComponent,  { size: 'lg' });


modalRef.componentInstance.heading = 'Choose an email template';
modalRef.componentInstance.body= '<h1>BODY</h1>';

last line will show like <h1>BODY</h1> in the modal ui. how can i pass it as html tag so it render correctly in modal window. modalRef.componentInstance can pass only string how to pass html content. I am trying to create a generic commondialog component with dynamic header ,body & footer.

Upvotes: 2

Views: 1966

Answers (1)

Kishan
Kishan

Reputation: 793

Here is way to add html in common modal component : 

<div class="modal-header">
    <h4 class="modal-title">  {{heading}}  </h4>
    <button type="button" class="close" aria-label="Close"  ">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <div class="modal-body" [innerHtml]="body">
  </div>

  <div class="modal-footer" [innerHtml]="footer">
     FOOTER COMES HERE
  </div>


const modalRef = this.modalService.open(CommonDialogComponent,  { size: 'lg' });


modalRef.componentInstance.heading = 'Choose an email template';
modalRef.componentInstance.body= '<h1>BODY</h1>';
modalRef.componentInstance.footer= '<h1>FOOTER</h1>';

Upvotes: 4

Related Questions