NgxSimpliAlert

Una librería Angular simple y elegante para mostrar alertas modales personalizables con animaciones suaves y múltiples tipos de mensajes.

🚀 Características

• ✅ Fácil de usar: Integración simple con solo unas líneas de código
• 🎨 Múltiples tipos: Success, Warning, Danger y Question
• 🎭 Animaciones: Transiciones suaves con CSS animations
• 📱 Responsive: Diseño adaptativo para dispositivos móviles
• 🔧 Personalizable: Títulos, descripciones y botones configurables
• 🚫 Sin dependencias: Solo requiere Angular core y common
• 🎯 TypeScript: Completamente tipado para mejor experiencia de desarrollo

📦 Instalación

npm install ngx-simpli-alert

📋 Tabla de Compatibilidad de Versiones

| NgxSimpliAlert | Angular | TypeScript | Node.js | Estado | |----------------|---------|------------|---------|---------| | 19.0.x | 19.x | 5.6+ | 18+ | ✅ Actual | | 18.0.x | 18.x | 5.5+ | 18+ | 🔄 Mantenimiento | | 17.0.x | 17.x | 5.2+ | 18+ | 📋 Planificado |

Notas de Compatibilidad

• Angular 19: ✅ Versión actual - Soporte completo con todas las características más recientes, signals estables, y las últimas mejoras de Angular
• Angular 18: 🔄 Compatible con retrocompatibilidad y mantenimiento
• Angular 17: 📋 Soporte planificado para mayor alcance

🛠️ Configuración

1. Importar el servicio

import { NgxSimpliAlertService } from 'ngx-simpli-alert';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  constructor(private alertService: NgxSimpliAlertService) {}
}

2. Usar en tu componente

showSuccessAlert() {
  this.alertService.show({
    title: '¡Éxito!',
    description: 'La operación se completó correctamente',
    type: 'success',
    confirmButtonText: 'Aceptar'
  });
}

showConfirmAlert() {
  this.alertService.show({
    title: '¿Estás seguro?',
    description: 'Esta acción no se puede deshacer',
    type: 'question',
    confirmButtonText: 'Sí, continuar',
    cancelButtonText: 'Cancelar'
  }, 
  () => {
    // Acción al confirmar
    console.log('Confirmado');
  },
  () => {
    // Acción al cancelar
    console.log('Cancelado');
  });
}

📋 API Reference

AlertOptions Interface

| Propiedad | Tipo | Requerido | Descripción | |-----------|------|-----------|-------------| | title | string | No | Título principal de la alerta | | description | string | No | Descripción o mensaje de la alerta | | type | 'success' \| 'danger' \| 'question' \| 'warning' | No | Tipo de alerta (por defecto: 'success') | | confirmButtonText | string | No | Texto del botón de confirmación | | cancelButtonText | string | No | Texto del botón de cancelación | | isActive | boolean | No | Estado de visibilidad (manejado internamente) |

NgxSimpliAlertService

Métodos

show(options: AlertOptions, onConfirm?: () => void, onCancel?: () => void)

Muestra una alerta modal con las opciones especificadas.

Parámetros:

• options: Configuración de la alerta
• onConfirm (opcional): Callback ejecutado al confirmar
• onCancel (opcional): Callback ejecutado al cancelar

🎨 Tipos de Alertas

Success

this.alertService.show({
  title: '¡Operación exitosa!',
  description: 'Los datos se guardaron correctamente',
  type: 'success',
  confirmButtonText: 'Entendido'
});

Warning

this.alertService.show({
  title: 'Advertencia',
  description: 'Algunos campos requieren atención',
  type: 'warning',
  confirmButtonText: 'Revisar'
});

Danger

this.alertService.show({
  title: 'Error',
  description: 'No se pudo completar la operación',
  type: 'danger',
  confirmButtonText: 'Intentar de nuevo'
});

Question

this.alertService.show({
  title: '¿Eliminar elemento?',
  description: 'Esta acción no se puede deshacer',
  type: 'question',
  confirmButtonText: 'Eliminar',
  cancelButtonText: 'Cancelar'
}, 
() => this.deleteItem(),
() => console.log('Cancelado')
);

🎯 Ejemplos Avanzados

Alerta con solo título

this.alertService.show({
  title: 'Mensaje simple',
  type: 'success'
});

Manejo de promesas

async confirmAction() {
  return new Promise((resolve) => {
    this.alertService.show({
      title: '¿Continuar?',
      description: 'Esta acción modificará los datos',
      type: 'question',
      confirmButtonText: 'Sí',
      cancelButtonText: 'No'
    },
    () => resolve(true),
    () => resolve(false)
    );
  });
}

// Uso
const confirmed = await this.confirmAction();
if (confirmed) {
  // Ejecutar acción
}

🎨 Personalización de Estilos

La librería incluye estilos por defecto, pero puedes sobrescribirlos en tu CSS global:

/* Personalizar el fondo del modal */
.alert-background {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Personalizar el contenido de la alerta */
.alert-content {
  border-radius: 10px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Personalizar botones */
.alert-content button {
  border-radius: 8px !important;
  font-weight: bold !important;
}

📝 Changelog

v19.0.0 (2025-10-26)

• 🎉 Lanzamiento inicial
• ✨ Soporte para Angular 19
• 🎨 4 tipos de alertas (success, warning, danger, question)
• 🎭 Animaciones CSS suaves
• 📱 Diseño responsive
• 🔧 API completa con callbacks
• 🚀 Compatibilidad con signals estables

🤝 Contribuir

Las contribuciones son bienvenidas. Por favor:

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/nueva-funcionalidad)
3. Commit tus cambios (git commit -am 'Agregar nueva funcionalidad')
4. Push a la rama (git push origin feature/nueva-funcionalidad)
5. Abre un Pull Request

📄 Licencia

Este proyecto está bajo la licencia MIT. Ver el archivo LICENSE para más detalles.

📞 Soporte

Si encuentras algún problema o tienes preguntas:

• Abre un issue
• Consulta la documentación
• Revisa los ejemplos de uso

Desarrollado con ❤️ para la comunidad Angular