Home / Questions / 198522
Accepted
bypabloc_
Asked: 2020-09-22 11:50:20 +0800 CST 2020-09-22 11:50:20 +0800 CST

How do I close a modal with bootstrap 4 in Angular?

  • 772

Using -->> this library <<-- :

Example of my modal :

<ng-template #content let-modal>
  <div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Crear</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss()">
  <span aria-hidden="true">&times;</span>
</button>
  </div>
  <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<div class="modal-body">
      <div class="row">
          <div class="col-md-6 offset-md-3">
                  <div class="form-group">
                      <label>Nombre</label>
                      <input type="text" formControlName="nombre" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.nombre.errors }" />
                      <div *ngIf="submitted && f.nombre.errors" class="invalid-feedback">
                          <div *ngIf="f.nombre.errors.required">Nombre Requerido</div>
                      </div>
                  </div>
          </div>
      </div>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal" (click)="modal.dismiss()">
    <span class="fa fa-remove"></span>  
    <span class="hidden-xs"> Cerrar</span> 
  </button> 
  <button [disabled]="loading" class="btn btn-primary">
    <span class="fa fa-save"></span>
    <span class="hidden-xs"> Guardar</span>
  </button>
</div>
  </form>
</ng-template>

Example of my component :

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DataTableDirective } from 'angular-datatables';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { CategoriaService } from '../../services/categoria.service';
import { Categoria } from '../../models/categoria';

@Component({
    selector: 'app-categoria-crear',
    templateUrl: '../../views/categoria/crear.html',
    styleUrls: ['../../styles/categoria.component.css'],
  providers: [CategoriaService]
})
export class CategoriaCrearComponent implements OnInit {

  registerForm: FormGroup;
  submitted = false;
  closeResult: string;
  public categoria: Categoria;

  constructor(
    private modalService: NgbModal,
    private formBuilder: FormBuilder
  ){
    this.categoria = new Categoria(null, '', true);
  }

  open(content) {
    this.modalService.open(content, { centered: true, backdropClass: 'light-blue-backdrop' });
  }

  ngOnInit(): void {
    this.registerForm = this.formBuilder.group({
        nombre: ['', Validators.required],
    });
  }

  get f() { return this.registerForm.controls; }

  onSubmit() {
    this.submitted = true;
    if (this.registerForm.invalid) {
      return;
    }
    alert('SUCCESS!! :-)');
  }
}

I can't get to fire the method to close the modal from Angular.

bootstrap

1 Answers

  1. Best Answer

    You must create a reference to the Modal Dialog (NgbModalRef) in order to manipulate it in the template or in code.

    <h1>Ejemplo formulario</h1>
<button (click)="open(content)">Abrir</button>
<button (click)="cerrar('Adios')">Cerrar</button>
<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Crear</h4>
    <button type="button" class="close" aria-label="Close" (click)="cerrar()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <form (ngSubmit)="onSubmit()">
    <div class="modal-body">
      <div class="row">
        <div class="col-md-6 offset-md-3">
          <div class="form-group">
            <label>Nombre</label>
            <input #camponombre type="text" formControlName="nombre" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.nombre.errors }" />
            <div *ngIf="submitted && f.nombre.errors" class="invalid-feedback">
              <div *ngIf="f.nombre.errors.required">Nombre Requerido</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" (click)="cerrar()">
        <span class="fa fa-remove"></span>
        <span class="hidden-xs" (click)="cerrar()"> Cerrar</span>
      </button>
      <button [disabled]="loading" class="btn btn-primary">
        <span class="fa fa-save"></span>
        <span class="hidden-xs" (click)="guardar(camponombre.value)"> Guardar</span>
      </button>
    </div>
  </form>
</ng-template>

    Controller

    import { Component } from '@angular/core';
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
  title = 'app';
  modal : NgbModalRef;

  constructor(private modalService: NgbModal) { }

  open(content) {
    this.modal = this.modalService.open(content, { centered: true, backdropClass: 'light-blue-backdrop' })    
    this.modal.result.then((e) => {
        console.log("dialogo cerrado")
    });        
  }

  cerrar() {
    this.modal.close();
  }

  guardar(nuevonombre) {
    console.log("El nuevo nombre es " + nuevonombre);
    this.modal.close();
  }
}
    • 4