Angular 5 Modal close programmatically

Issue

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">
          <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 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) {
    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();
 } 
At a point I want to close / hide the modal. like I have tried in this.noteModal.nativeElement.hide();

Solution

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>
</a>

Typescript,

@ViewChild('closeModal') private closeModal: ElementRef;
public hideModel() {
        this.closeModal.nativeElement.click();      
}

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

Thanks,

Muthu

Answered By – Karnan Muthukumar

Answer Checked By – Willingham (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.