How to make reusable Modals In Angular with sweetalert2

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

Top 100 Questions You Must Prepare For Your Next Angular Interview

Top Writer in Writing | Humor: Writing about Angular, JavaScript, and TypeScript related articles.

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