Creating a definition for the use of sweet alerts within a service and incorporating them through

Question

Creating a definition for the use of sweet alerts within a service and incorporating them through

Implementing sweet alert for displaying alert messages in angularJS2/typescript. Due to the repetitive nature of this code in different parts of the application, a service was created.

@Injectable()
export class AlertMessageService {



    constructor(private http: Http) {

     }

   public deleteMessage(){
    return swal({
      title: 'Are you sure?',
      text: "Delete the selected record(s)?",
      type: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#66c378',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes'
    })
    }

Attempting to use the service in a component as shown below, but encountering issues.

  this.alertMessageService.deleteMessage.then(() => {
      if (ind !== -1 && ind != undefined) {
        this.attachments.splice(ind, 1);
      }
      /* let headers = new Headers();
        this.http.delete(AppUtils.INCIDENT_ATTACHMENT_URI+"/? path" + "=" + item.filePath,  {})
              .map(response => response.json().result)
              .catch(this.handleError);*/
    });
  }

Is there a way to define different types of alerts within the service and inject them when needed? If so, how can this be achieved?

typescript sweetalert

Answer 1

Answer №1

notification.service.ts

import { Injectable } from '@angular/core';
import notify from 'sweetNotify';
@Injectable()
export class NotificationService {
constructor() { }
public warningNotification(message, isShowCancel?) {
return notify({
  title: message || 'Are you sure?',
  type: 'warning',
  showCancelButton: isShowCancel,
  cancelButtonText: 'No',
  confirmButtonText: isShowCancel ? 'Yes' : 'Ok',
  reverseButtons: true,
  allowOutsideClick: false
});
}
}

In popup.component.ts

constructor(public notificationService: NotificationService){}
const response =  this.notificationService.warningNotification('Your message', true);

   if (response.value) {
   // User clicked Yes on notification
    }
   else{// User clicked cancel on notification}

In app.module.ts

import 
providers: [NotificationService ]

Answer 2

notification.service.ts

import { Injectable } from '@angular/core';
import notify from 'sweetNotify';
@Injectable()
export class NotificationService {
constructor() { }
public warningNotification(message, isShowCancel?) {
return notify({
  title: message || 'Are you sure?',
  type: 'warning',
  showCancelButton: isShowCancel,
  cancelButtonText: 'No',
  confirmButtonText: isShowCancel ? 'Yes' : 'Ok',
  reverseButtons: true,
  allowOutsideClick: false
});
}
}

In popup.component.ts

constructor(public notificationService: NotificationService){}
const response =  this.notificationService.warningNotification('Your message', true);

   if (response.value) {
   // User clicked Yes on notification
    }
   else{// User clicked cancel on notification}

In app.module.ts

import 
providers: [NotificationService ]

Creating a definition for the use of sweet alerts within a service and incorporating them through

Answer №1

Similar questions

The value binding for input elements in Angular 4 remains static and does not reflect changes in the UI

The field '_id' is not present in the type Pick

Nextjs introduces an innovative "OnThisDay" functionality, leveraging getServerSideProps and Date.now() to provide real-time information

Creating a union type from an array that is not a literal (using `Object.keys` and `Array.map`)

Why does VSCode open a React app in Edge instead of Chrome?

`Optimizing bundle size in Webpack using braintree-web integration with TypeScript`

Craft fresh items within HTTP request mapping

Using TypeScript generics to define function parameters

Preventing recursive updates or endless loops while utilizing React's useMemo function

"Ionic 3: Utilizing the If Statement within the subscribe() Function for Increased Results

Is it possible to achieve real-time two-way data binding in a reactive form by passing values from one formgroup to another formgroup? If so, how

What causes an error when the App is enclosed within a Provider component?

Error: Angular 6 resolve consistently returns undefined

Enhance Your NestJS Experience: Using Interceptors for Mapping and Error Handling

Create Angular file structures effortlessly using a tool similar to Rails scaffold

Send the Children prop to the React Memo component

Using the moment library in Angular to convert date and time can sometimes lead to errors

Is TypeScript's `readonly` feature a complete replacement for Immutable.js?

Conditional Skipping of Lines in Node Line Reader: A Step-by-Step Guide

Determining if an emitted event value has been altered in Angular 4