Hi there, I'm currently working on incorporating a search bar into a modal window by embedding HTML within the modal body. Here's how I've written the code:
onClick() {
const dialogRef = this.modal.alert()
.size('lg')
.showClose(true)
.title('A simple Alert style modal window')
.body(`
<div class="card container-fluid col-xs-10">
<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 issue arises when trying to reference data in the same TypeScript file as the onClick function within the HTML embedded in the modal's body. Running this HTML separately works perfectly (without being in a modal), and inserting generic HTML content within the modal also functions correctly. However, upon including the above code snippet, the search bar fails to render, and the developer console displays a warning stating that some content was stripped due to HTML sanitization. Does anyone have any insights into what could be causing this? It's possible that the problem lies in the inability of the HTML within the modal body to access objects in the TypeScript file where the onClick function resides. Could it be related to the fact that the template is referencing a separate HTML file, or should it still be able to access objects from the TypeScript file?