Using a template in .body to avoid sanitization warning?

[ghost]

Hi I tried adding a search bar into the modal like so and I got a sanitization warning.

onClick() {
      const dialogRef = this.modal.alert()
        .size('lg')
        .showClose(true)
        .title('Add a class')
        .body(`
          <div class="card container-fluid col-xs-10" id="searchdiv">
          <div class="card-block">
              <div class="form-group row">
                  <div class="col-5">
                      <ng2-completer class="completer-limit"
                                     [(ngModel)]="searchStr"
                                     [datasource]="dataService"
                                     [minSearchLength]="0"
                                     [inputClass]="'form-control'"
                                     [placeholder]="'Enter the class you would like to add'"
                                     [matchClass]="'match'"
                                     [autofocus]="true"
                                     [textSearching]="false">
                      </ng2-completer>
                  </div>
              </div>
          </div>
      </div>`)
        .open();
    }

The relevant objects that the html in .body references are in the same file as the function onClick. Nothing is displayed, similarly just trying to add an html element like a button to .body renders the same warning. So I thought I would pass an ng-template to .body (i.e. .body(myTemplate)) but it just displays [Object object]. Is it possible to pass a template object to .body?

[shlomiassaf]

Not possible, you can not inject html with components/directives.

its not a limitation from ngx-modialog, Angular does not work that way.... dynamic component creation can only work through code.

Use custom component approach instead, see demos for example.

[lucasmonstrox]

@shlomiassaf where is the example with custom components?

[dipaktelangre]

Where is the custom component 👎

[giulioprinaricotti]

For anyone still searching the demo can be found (for Bootstrap powered dialogs) here