Angular 5 Modal close programmatically


I am using angular 5

<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">
            <a href="javascript:void(0)" class="text-white" data-dismiss="modal" aria-label="Close">
              <i class="ti-close"></i>
        <h4 class="modal-title text-center">Replace Note</h4>
      <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-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">



This is a modal. After completing the task the modal do, I want to close it programmatically with typescript.

I am trying to get a reference of the modal like :

 @ViewChild('noteModal')  noteModal: ElementRef;

After binding data I am trying to close or hide the modal :

 onReplaceNote(event) {
 onReplaceDataBind(data) {
   this.uiNotes.forEach(uiNote => {
     if (uiNote.note.itemId == data.itemId) {
       uiNote.note.title = data.title;
At a point I want to close / hide the modal. like I have tried in this.noteModal.nativeElement.hide();


I have already done before let try this just for suggestion,

Html File, Change your code like this,

<a  #closeModal class="text-white" data-dismiss="modal" aria-label="Close" (click)="hideModel();">
   <i class="ti-close"></i>


@ViewChild('closeModal') private closeModal: ElementRef;
public hideModel() {;      

I hope its solve your problem, If any error please let me know.



Answered By – Karnan Muthukumar

Answer Checked By – Willingham (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.