close - ¿Cómo puedo cerrar un modal en Angular 2?

open modal angular 6

Question

Quiero que el usuario haga clic en el botón Enviar y el cierre modal automáticamente.

Si agrego data-dismiss="modal" en el <button> Enviar <button> , no ejecutará submitComments() .

Intenté hacer algo como $(''#myModal'').modal(''hide''); , pero no tener éxito.

Entonces, ¿cómo puedo cerrar un modal en Angular 2? Gracias

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>

<div id="myModal" class="modal fade">
     <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <form (ngSubmit)="submitComments()">
                    <div class="form-group row">
                        <label class="form-control-label col-sm-2">Comments:</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

.

submitComments() {
    // I want to do something like $(''#myModal'').modal(''hide''); here.
}

Answer 1

Aparte de la respuesta de @ MattScarpino, otra alternativa es simplemente cambiar el tipo de button a button de submit y llamar a su función submitComments() y al mismo tiempo llamar dismiss-modal . Al hacerlo, también puede descartar la función modal y de llamada al mismo tiempo, y espero que esto pueda ayudarlo. Aquí está el ejemplo:

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>

<div id="myModal" class="modal fade">
     <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <form>
                    <div class="form-group row">
                        <label class="form-control-label col-sm-2">Comments:</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="button" (click)=''submitComments()'' data-dismiss="myModal" class="btn btn-default">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Actualizar

Si desea cerrar el modal desde el lado del controlador, puede utilizar el uso de esta manera.

$("#myModal").modal("hide");

Answer 2

Lo he hecho así y me funciona perfectamente.

var element = document.getElementById("CloseButton") as any;

element.click();

Donde mi CloseButton es bootstrap close button.

Answer 3

Primero, establece la propiedad hidden del div igual a una variable:

<div id="myModal" [hidden]="hideModal" class="modal fade">

Segundo, en la clase, defina un booleano llamado hideModal y hideModal en falso:

hideModal: boolean = false;

Tercero, en submitComments() , establezca hideModal en true.

Answer 4

Puede hacerlo simplemente declarando la variable jQuery con cualquier tipo dentro del controlador Angular2.

declare var jQuery:any;

Agregue esto justo después de las declaraciones de importación y antes del decorador de componentes.

Luego accede al modo bootstrap con su id como este.

jQuery("#myModal").modal("hide");

Answer 5

Respuesta perfecta en este universo .........................

Paso 1: da una identificación única al botón de despedida de modal

Paso 2: después de enviar correctamente el formulario o finalizar la llamada de la tarea

document.getElementById("addProductCloseButton").click();

en tu clase

Answer 6

Simplemente declare un id = "close_model" en el botón de descartar y coloque este código en la función donde desea cerrar el modelo:

window.document.getElementById ("close_model"). click ();

Answer 7

Trate de no incluir el formulario en su cuerpo modal; en su lugar, agregue dos botones para el mismo en su sección de pie de página.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span aria-hidden="true">&times;</span></button>
          </div>
          <div class="modal-body">
    <label class="form-control-label col-sm-2">Comments:</label>
                    <div class="col-sm-10">
                        <textarea class="form-control" rows="3"></textarea>
                    </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
            <button type="submit" class="btn btn-primary" >Save changes</button>
          </div>
        </div>
      </div>
    </div>

Answer 8

Utilizando @ViewChild

agregue #closeBtn al elemento con data-dismiss="modal"

<a><i class="fa fa-close" data-dismiss="modal" #closeBtn></i></a>

Componente html

<div class="modal fade" id="yourModalId">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <a><i class="fa fa-close" data-dismiss="modal" #closeBtn></i></a>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>

utilizando this.closeBtn.nativeElement.click(); para activar el evento de clic se cerrará su modal.

Componente mecanografiado

import {ViewChild, ElementRef} from ''@angular/core'';
@Component({
    moduleId: ...,
    selector: ''.'',
    templateUrl: ''.'',
    styleUrls: [''.'']
})
export class yourClass {
    @ViewChild(''closeBtn'') closeBtn: ElementRef;

    yourFunction() {
        //do something
        ...
        ...
        //close your modal
        this.closeModal();
    }

    //call this wherever you want to close modal
    private closeModal(): void {
        this.closeBtn.nativeElement.click();
    }
}

Answer 9

Utilizo una de las respuestas y, con un poco de edición, su trabajo es perfecto para mí, espero que pueda ayudarlo a intentar cambiar "yourmodal" al nombre modal que es su objetivo, debe usar el botón En lugar de i

<button hidden="hidden" class="fa fa-close" data-dismiss="modal" id="closeBtn" #closeBtn (click)="yourModal.close()"></button>

Componente html

<div style="margin-top: 0px !important;">
    <button type="button" id="openModal" #openModal class="btn btn-fab-mini btn-outline-primary" style="float:right" (click)="yourModal.open()"><strong>click here to open modal</strong></button>
    <modal #yourModal>
      <ng-template #modalHeader>
       <button hidden="hidden" class="fa fa-close" data-dismiss="modal" id="closeBtn" #closeBtn (click)="yourModal.close()"></button>
      </ng-template>
      <ng-template #modalBody>
        <yourmodalSelectorname></yourmodalSelectorname>
      </ng-template>
      <ng-template #modalFooter></ng-template>
    </modal>
  </div>

Mecanografiado

import {ViewChild, ElementRef} from ''@angular/core'';

@Component({
moduleId: ...,
selector: ''.'',
templateUrl: ''.'',
styleUrls: [''.'']})



yourFunction() {
    //do something
    ...
    ...
    //close your modal
    this.closeModal();
}

//call this wherever you want to close modal
private closeModal(): void {
    this.closeBtn.nativeElement.click();
}