Búsqueda de sitios web

typescript - Cerrar modal de Angular 5 programáticamente

Estoy usando 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>

Esto es un modal. Después de completar la tarea que hace el modal, quiero cerrarlo programáticamente con TypeScript.

Estoy tratando de obtener una referencia del modal como:

 @ViewChild('noteModal')  noteModal: ElementRef;

Después de enlazar los datos, estoy intentando cerrar o ocultar el 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();

Respuesta #1

Ya lo he hecho antes, intentemos esto solo como sugerencia,

Archivo Html, cambia tu código así,

<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();      
}

Espero que resuelva tu problema. Si hay algún error, por favor házmelo saber.

Gracias,

Muthu

Respuesta #2

Puedes cerrar el modal usando attr.data-dismiss en un botón, por ejemplo: (Probado en Angular 10)

<button type="button" class="btn btn-block btn-primary" [attr.data-dismiss]="<expression>" id="saveButton" (click)="action()">

Donde <expression> es la expresión que desea evaluar y action() es el método o función que desea llamar, por ejemplo, para validar si el formulario es válido, usando formularios reactivos:

<button type="button" class="btn btn-block btn-primary" [attr.data-dismiss]="Form.valid ? 'modal' : null" id="saveButton" (click)="saveMyModalInfo()">

Esto evaluará si el formulario es válido, si no lo es, data-dismiss se "apuntará" a null, de lo contrario se "apuntará" al modal.

Artículos relacionados