NgMelitModal

Modal de confirmación de Bootstrap para Angular 5+
https://ng-bootstrap.github.io/#/getting-started

Instalación

Es necesario que el proyecto tenga Bootstrap 4

npm i ng-melit-modal

Cómo usar

Primero deberemos importarlo en el module

app.module.ts Sin lazy loading o xxxx.module.ts Con Lazy Loading

@NgModule({
    declarations: [...],
    imports: [...,NgMelitModalModule],
    entryComponents: [...,NgMelitModalComponent],
    ...
})

En el componente donde queramos usarlo

xxxx.component.ts Con opciones predeterminadas

import { Component } from '@angular/core';
import { NgMelitModalService , ConfirmOptions } from 'ng-melit-modal';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  
  respuesta : string;

  constructor(private modalConfirm: NgMelitModalService) { }

///Metodo con el cual abrimos la modal
  openModal() {

      //Si no queremos añadir opciones especiales no pasamos parametro

    this.modalConfirm.confirm().then(resp => {
        
        //Aqui obtendremos a que botón ha dado el usuario
       this.respuesta = resp;
    
    });
  }
}

Como personalizar los mensajes de la modal

La configuración de los mensajes de la modal, se hace instanciando un objeto de la Clase ConfirmOptions

| Atributos | Definición | Valor por Defecto | Tipo | | ------------- |:-------------:| :-----:| :----: | | title | Titulo superior de la modal | Confirmacion | string | | message | Mensaje de la modal | ¿Desea confirmar su acción? | string | | msgBtnOk | Texto que mostrará el botón que confirme | Aceptar | string | | msgBtnCancel | Texto que mostrará el botón que cancele | Cancelar | string | | valueAccept | Valor que nos devolverá la modal cuando den al botón de aceptar| ok | string | | valueCancel | Valor que nos devolverá la modal cuando den al botón de cancelar| cancel | string | | showCancel | Muestra el boton de cancelar | true | boolean | | modalClass | Clase de Bootstrap con la que se presentara la modal | - | string | | textClass | Clase de Bootstrap con la que se presentara el texto de la modal | dark | string | | btnOkClass | Clase de Bootstrap con la que se presentara el botón de confirmación | btn-outline-primary | string | | btnCancelClass | Clase de Bootstrap con la que se presentara el botón de cancelación | btn-outline-danger | string | | btnOkTextClass | Clase de Bootstrap con la que se presentara el color del texto botón de confirmación | - | string | | btnCancelTextClass | Clase de Bootstrap con la que se presentara el color del texto botón de cancelación | - | string |

Por lo que si queremos hacer que tengan distitos valores, lo haremos de la siguiente manera:

    openModal() {

    //En caso de que cambiemos todos los campos
    let customOpts: ConfirmOptions = {
      title: 'Confirmacion Personalizada',
      message: 'Mensaje Personalizado',
      msgBtnOk: 'Boton Ok personalizado',
      msgBtnCancel: 'Boton Cancelar Personalizado',
      valueAccept: 'Valor Ok personalizado',
      valueCancel: 'Valor Cancel Personalizado',
      modalClass: 'warning',
      textClass: 'primary',
      showCancel: false,
      btnCancelClass: '',
      btnOkClass: 'btn-primary',
      btnCancelTextClass: 'text-primary',
      btnOkTextClass: 'text-primary',
    }

    //En caso de que solo queramos cambiar algunos

    let customOpts2 : ConfirmOptions = new ConfirmOptions();
    customOpts.title = 'Confirmacion Personalizada';

    //Y lo pasamos como parametro 
    this.modalConfirm.confirm(customOpts).then(resp => {
        
        //Aqui obtendremos a que botón ha dado el usuario
       this.respuesta = resp;
    
    });
  }