How to make reusable sweetalert2 in Angular?

Image for post
Image for post
import { SweetAlertIcon } from 'sweetalert2';export interface IPopConfig {title: string,text: string,icon: SweetAlertIcon,showCancelButton: boolean,reverseButtons: boolean,confirmButtonText: string,cancelButtonText: string}
import Swal from 'sweetalert2';import { IPopConfig } from '../interfaces/popupconfig';export class PopupModal{/*** @param config* title : string* text : string* icon: pop-up type* showCancelButton : boolean* reverseButtons : boolean* confirmButtonText : string* cancelButtonText : string*/showModal(config:IPopConfig) {return Swal.fire({title: config.title,text: config.text,icon: config.icon,showCancelButton: true,reverseButtons: true,confirmButtonText: config.confirmButtonText,cancelButtonText: config.cancelButtonText}).then(result => result.value);}getPopupConfiguration(result:IPopConfig) {const config = {title: result.title,text: result.text,showCancelButton: true,icon: result.icon,confirmButtonText: result.confirmButtonText,cancelButtonText: result.cancelButtonText,reverseButtons: true};return config;}}
popup: PopupModal = new PopupModal();//show dialog boxconst configval = {title: 'Are you sure ?',text: 'This process is irreversible.',showCancelButton: true,icon: 'warning',confirmButtonText: 'YES',cancelButtonText: 'NO',reverseButtons: false} as IPopConfig;const config = this.popup.getPopupConfiguration(configval);this.popup.showModal(config).then(res=>{if(res){}});
Image for post
Image for post

Written by

Writing about Angular,JavaScript and Type Script related articles. Please follow, clap stories to motivate us writing more!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store