0

Buenas.

Actualmente tengo una serie de botones que realizan una serie de acciones. Un sistema CRUD vaya. Quiero añadir ventanas modales en algunos de ellos, por ejemplo a la hora de borrar que aparezca un modal de confirmación antes y en función de la respuesta continuar o no con la llamada a la API que borrará el registro de BD.

Estoy buscando y creo que lo que necesito es abrir el modal a través de TemplateRef pero no consigo encontrar nada que me sirva ni una fuente donde expliquen como utilizarlo al menos en la manera que yo necesito. ¿Alguien que haya tenido ya este problema tiene algo de documentación o similar que pueda servir?

Un saludo.

Después de ayudarme de la respuesta estoy en este punto:

HTML MODAL:

<div class="modal-header">
  <h4 class="modal-title">Hi there!</h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <p>Hello, World!</p>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>

Component modal

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

@Component({
  selector: 'modal',
  moduleId: module.id,
  templateUrl: './modal.view.html'
})
export class ModalComponent {
  constructor(private activeModal: NgbActiveModal){}
}

Component donde quiero llamar al modal:

    import { Component, Input, Output, EventEmitter, AfterViewInit, ViewChild } from '@angular/core';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
import { ModalComponent } from '../modal/modal.component';

// Component decorator
@Component({
    selector: 'test',
    moduleId: module.id,
    templateUrl: 'test.view.html',
})
// Component class
export class TestComponent { 


    // Constructor
     constructor(
        private modalService: NgbModal
        ){}

        @ViewChild(ModalComponent)

        private modalComponent: ModalComponent;

        //Send to father component the copie selected.
        showModal(): void {
            this.modalService.open(this.modalComponent);
        }

Aún así sigue sin abrirme el modal cuando hago click. Aun que el resto de acciones asociadas a la función (que he omitido para mayor claridad del código) siguen funcionando. NO tengo errores en consola.

2
  • Te he resubido el plunk con el ejemplo funcionando, los has comprobado? te sirve? si es asi, podrias marcar la respuesta como correcta? salu2 el 10 mar. 2017 a las 9:22
  • Al final en vez de usar Modales pasé a usar alertas de bootstrap y tal. Pero lo he probado y me sirve la solución. Muchas gracias.
    – Findelias
    el 10 mar. 2017 a las 9:27

3 respuestas 3

1

Puedes usar ng-bootstrap y de fácil manera, abrir/cerrar popups y tener control sobre la acción llevada a cabo por el usuario.

https://ng-bootstrap.github.io/#/components/modal

Los pasos para instalarlo son muy sencillos, aqui tienes la doc:

https://ng-bootstrap.github.io/#/getting-started

EDITADO

Aqui tienes el plunk modificado funcionando. Te sugiero que cambies el nombre del componente y que crees su html y sass asociado ;)

http://plnkr.co/edit/dF8p7V1jIikoiyRmBiJe?p=preview

9
  • El problema es que necesito que los modales estén alojados en otra parte. En esos ejemplos (son los que estoy siguiendo y usando de hecho ya lo tengo instalado) Se emplea el uso del modal insertando el propio botón que lo abre en el componente modal. Yo necesito que el botón que abra el modal esté en mi componente y el template del modal en otro lado o que sea otro componente. Y en función de la respuesta que me devuelva yo actúo en consecuencia. Típica pregunta "Quiere borrar el registro?" En función de la respuesta ejecutas la operación de borrado o cortas el flujo de ejecución.
    – Findelias
    el 7 mar. 2017 a las 11:42
  • Claro, pero eso no es problema. Create un componente, y usa viewchild para inyectarlo dentro del padre. Aqui tienes la doc angular.io/docs/ts/latest/cookbook/… el 7 mar. 2017 a las 11:46
  • Vale, algo voy avanzando jajaja. Muchas gracias por los enlaces pero sigo sin poder mostrar el modal (Aun que ya no me da errores por consola). Actualizo la pregunta con el código a ver si alguien puede echarme una mano.
    – Findelias
    el 7 mar. 2017 a las 12:57
  • tienes el metodo showModal() declarado, pero de donde lo llamas? el 7 mar. 2017 a las 13:07
  • En un botón en la vista de ese componente jajaja. Me he ahorrado ponerlo porque era eso, un botón con un (click)="showModal()" jejeje
    – Findelias
    el 7 mar. 2017 a las 13:10
1

Tuve el mismo problema y la solución es la siguiente: No hace falta

@ViewChild(ModalComponent)

y tampoco

private modalComponent: ModalComponent;

y en

this.modalService.open(this.modalComponent);

lo que se coloca es el componente que importaste

this.modalService.open(ModalComponent);
0

Quizá te pueda servir esta información:

Angular 2/5 - Custom Modal Window / Dialog Box

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.