NgModalのHTMLを動的にレンダリングすることはできますか？

Question

私はまだAngular2を掘り下げています。 私はオンラインでチェックしようとしましたが、それが可能であることを示唆する何かを見つけることができませんでした。

私の質問がある -

は、私は1つのページに一つだけngModalを持つことができ、ちょうど異なるコンテンツをアップしましたが、また別のHTMLフォーマットされていません。私は他のをクリックすると

<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> 

、

<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> 

はこれが可能である - だから、以下、私は1つをクリックしたとき、私は自分のページ上の2つのボタンを持っていると仮定することができますが、モーダルがどのように見えるべきかありますか？私の実際のユースケースは、異なる構造のテーブルをモーダルに表示することです。

ご協力いただければ幸いです。

おかげで、 Pratik

Answer 1

はい、可能です。 内側のhtml bindディレクティブで追加するだけです。

<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> 

がangular 2 html binding