Can I have NgModal's HTML rendered dynamically

Question

I'm still digging my way through Angular2. I tried checking online, but I couldn't find anything that suggests it's possible.

My question is -

Can I have just one ngModal on one page, and have not just different content served up, but also different HTML formatting. So lets assume I have two buttons on my page, when I click one, the below is how the modal should look -

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">{{ModalTitle}}</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer" *ngIf="footerEnabled">
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
  </div>
</ng-template>

When I click the other,

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">{{ModalTitle}}</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <span>One fine body&hellip;</span>
  </div>
  <div class="modal-footer" *ngIf="footerEnabled">
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
  </div>
</ng-template>

Is this possible? My actual use case is to display differently structured tables in the Modal.

Any help will be appreciated.

Thanks, Pratik

Answer 1

Yes, that would be possible. Just add it through the inner html bind directive.

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">{{ModalTitle}}</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body" [innerHTML]="ModalContent">
  </div>
  <div class="modal-footer" *ngIf="footerEnabled">
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
  </div>
</ng-template>

See Angular HTML binding