Mostrar un modal con Ng-Bootstraps – Angular 2+

Hola a todos, hoy os voy a explicar como mostrar un modal con ng-bootstrap en Angular 2+.

Si queremos mostrar modales en nuestra aplicación angular, lo podemos hacer simplemente con bootstrap, pero si queremos mas control sobre ellos en angular lo podemos hacer.

Necesitamos instalar las siguientes dependencias en nuestro package.json:

“@ng-bootstrap/ng-bootstrap”:”^5.0.0″

También necesitamos instalar bootstrap. Os recomiendo la version 4.
Os dejo un manual para que sepáis como se hace:

Instalar Bootstrap 3 en nuestra aplicación angular

Una vez hayamos importado bootstrap, vamos a importar en el app.module el modulo NgbModule.


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap'

@NgModule({
  imports:      [ 
    BrowserModule, 
    FormsModule,
    NgbModule 
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Ahora en el app.component.html, voy a crear los botones para llamar a los modales:


<div class="text-center">
  <p>Haz click en el boton para lanzar el modal deseado</p>
  <p><button (click)="mostrarModalInfo()">Modal para informar</button></p>
  <p><button (click)="mostrarModalConf()">Modal de confirmacion</button></p>
</div>


Ahora vamos a crear un par de ng-template que va a contener nuestros modales, en uno de ellos tendra botones de acción:


<ng-template #myModalInfo let-modal>

  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">Éxito</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="modal.close()"> 
          <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
      ¡Modal mostrado correctamente!
    </div>
  </div>

</ng-template>

<ng-template #myModalConf let-modal>

  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">Éxito</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="modal.close('Cerrado desde la ventana')"> 
          <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
      ¿Quieres confirmar la informacion? (Mira el resultado en consola)
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="modal.close('No')">No</button>
      <button type="button" class="btn btn-primary" (click)="modal.close('Si')">Si</button>
    </div>
  </div>

</ng-template>

Importante, en los botones de acciones, hemos puesto el evento click para que llame modal.close(‘<mensaje>’), donde <mensaje> es un mensaje que nosotros pongamos.

Ahora en el ts, vamos a poner inyectar el servicio NgbModal que es el que abrirá los modales y también vamos a crear dos ViewChild para asociarlos con su respectivo template.


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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  @ViewChild("myModalInfo", {static: false}) myModalInfo: TemplateRef<any>;
  @ViewChild("myModalConf", {static: false}) myModalConf: TemplateRef<any>;
  
  constructor(private modalService: NgbModal){

  }

}


Después, creamos las funciones que se llamaran al pulsar los botones que abriran los modales.


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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  @ViewChild("myModalInfo", {static: false}) myModalInfo: TemplateRef<any>;
  @ViewChild("myModalConf", {static: false}) myModalConf: TemplateRef<any>;
  
  constructor(private modalService: NgbModal){

  }

  mostrarModalInfo(){
    this.modalService.open(this.myModalInfo);
  }

  mostrarModalConf(){
    this.modalService.open(this.myModalConf).result.then( r => {
      console.log("Tu respuesta ha sido: " + r);
    }, error => {
      console.log(error);
    });
  }

}


Con this.modalService.open(), abrimos el modal pasandole el ViewChild que queramos abrir.

Si queremos recibir algún mensaje, tendremos que hacer esto:


 this.modalService.open(this.myModalConf).result.then( r => {
    console.log("Tu respuesta ha sido: " + r);
 }, error => {
    console.log(error);
 });

Así podremos recoger el mensaje que nos envía el modal.close.

Os dejo el ejemplo completo:

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.

Etiquetas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *