In my current project, I am working with Angular 5.
One of the functionalities I have implemented is a modal window. The HTML structure for this modal looks like this:
<div class="add-popup modal fade" #noteModal id="noteModal" tabindex="-1" role="dialog" aria-labelledby="noteModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header gredient-bg">
<ul class="card-actions icons right-top">
<li>
<a href="javascript:void(0)" class="text-white" data-dismiss="modal" aria-label="Close">
<i class="ti-close"></i>
</a>
</li>
</ul>
<h4 class="modal-title text-center">Replace Note</h4>
</div>
<div class="modal-body">
<div class="package_summary text-center">
<p>Please upload a pdf file you want to replace with the existing one. This will replace <strong>{{notesToBeRelaced?.note?.title}}</strong>
</p>
<p-fileUpload mode='advanced' #replaceFile name="replace1[]" [url]="getReplaceUrl(notesToBeRelaced?.note?.itemId)" accept="application/pdf" maxFileSize="100000000" (onBeforeSend)="onBeforeSend($event)" (onProgress)="onProgress($event)" (onSelect)="onFileSelect($event)"
(onUpload)="onReplaceNote($event)" chooseLabel="Select Note">
</p-fileUpload>
</div>
</div>
</div>
</div>
</div>This modal is used to perform certain tasks. Once these tasks are completed, I want to be able to programmatically close the modal using TypeScript.
To achieve this, I need to get a reference to the modal in my component:
@ViewChild('noteModal') noteModal: ElementRef;After binding the necessary data, I attempt to close or hide the modal:
onReplaceNote(event) {
this.onReplaceDataBind(JSON.parse(event.xhr.response));
}
onReplaceDataBind(data) {
this.uiNotes.forEach(uiNote => {
if (uiNote.note.itemId == data.itemId) {
uiNote.note.title = data.title;
}
});
this.noteModal.nativeElement.hide();
} Once a specific point is reached in the application flow, I call this line of code to close/hide the modal:
this.noteModal.nativeElement.hide();