title: How to pass dynamic HTML tag to a bootstrap modal?
body: <p>Consider a component common-dialog </p>
  
  <pre><code>&lt;div class="modal-header"&gt;
      &lt;h4 class="modal-title"&gt;  {{heading}}  &lt;/h4&gt;
      &lt;button type="button" class="close" aria-label="Close"  "&gt;
        &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  
    &lt;div class="modal-body"&gt;
      BODY COMES HERE
    &lt;/div&gt;
  
    &lt;div class="modal-footer"&gt;
       FOOTER COMES HERE
    &lt;/div&gt;
  
  
  const modalRef = this.modalService.open(CommonDialogComponent,  { size: 'lg' });
  
  
  modalRef.componentInstance.heading = 'Choose an email template';
  modalRef.componentInstance.body= '&lt;h1&gt;BODY&lt;/h1&gt;';
  </code></pre>
  
  <p>last line will show like  <strong><code>&lt;h1&gt;BODY&lt;/h1&gt;</code></strong>  in the modal ui.
  how can i pass it as html tag so it render correctly in modal window.
  <strong>modalRef.componentInstance can pass only string how to pass html content.</strong>
  <strong>I am trying to create a generic commondialog component with dynamic header ,body &amp; footer.</strong></p>