ngx-bootstrap-modal modal doesn't parse html element

Question

I am using ngx-bootstrap-modal in angular 5.

I am using below code to open the modal:-

 this.dialogService.addDialog(PopUpComponent, {
      title: 'Custom locale',
      message: "Hello ? "
    }).subscribe((isConfirmed) => {
      if (isConfirmed) {
        console.log('close...')
      }

I work properly. But when I pass HTML tags in the message, the HTML tags doesn't parse. prints as it is.

 this.dialogService.addDialog(PopUpComponent, {
      title: 'Custom locale',
      message: `<div class="simpleBox">sjdhfjsdhf</div>`
    }).subscribe((isConfirmed) => {
      if (isConfirmed) {
        console.log('close...')
      }

It renders in the message: <div class="simpleBox">sjdhfjsdhf</div>.

The modal code is as follows:-

<div id="NewThemePopUp" class="modal-dialog">
  <div class="modal-content">
    <div title="Close" (click)="close()" class="newCrossIcon"></div>
    <div class="modal-header">
      <h4 class="modal-title confirmBlueStrip">{{title || ''}}</h4>
    </div>
    <div class="modal-body cfUnselectable Pop_up_txt_box newtheme">
      {{message || ''}}
    </div>
    <div class="modal-footer">
      <div class="btnRow"><a class="cencel_link btnLink" (click)="close()">Cancel</a> <input
        type="button" value="Create" ng-class="CreateThemeButtonClicked? 'btn disabled':'btn'" style="float:right;"
        class="btn"></div>
    </div>
  </div>
</div>

score 0 · Answer 1 · answered Jan 04 '18 at 14:23

For your specific example you could try this:

<div id="NewThemePopUp" class="modal-dialog">
  <div class="modal-content">
    <div title="Close" (click)="close()" class="newCrossIcon"></div>
    <div class="modal-header">
      <h4 class="modal-title confirmBlueStrip">{{title || ''}}</h4>
    </div>
    <div class="modal-body cfUnselectable Pop_up_txt_box newtheme" [innerHTML]="message || ''">
    </div>
    <div class="modal-footer">
      <div class="btnRow"><a class="cencel_link btnLink" (click)="close()">Cancel</a> <input
      type="button" value="Create" ng-class="CreateThemeButtonClicked? 'btn disabled':'btn'" style="float:right;"
      class="btn"></div>
      </div>
    </div>
  </div>

Be aware that by using this technique, you cannot pass attributes like style, script, url and resourceUrl. In order for that to work, you can use DomSanitizer

ngx-bootstrap-modal modal doesn't parse html element

1 Answers1