ng-melit-modal v0.0.5

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

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;
    
    });
  }