Home > Mobile >  Angular data from service to component
Angular data from service to component

Time:06-02

here is my code.it is a simple service .how can ı sent to data result after confirm click to related componenet .if ı confirm clicked data result=true else false .ı must to see this data result in component file

import { Injectable } from '@angular/core';
import Swal from 'sweetalert2';

@Injectable({
  providedIn: 'root',
})
export class SweetalertService {
  constructor() {}

   

  confirm(){

    Swal.fire({
      title: 'Do you want to save the changes?',
      showDenyButton: true,
      showCancelButton: true,
      confirmButtonText: 'Save',
      denyButtonText: `Don't save`,
    }).then((result) => {
      
      if (result.isConfirmed) {
        Swal.fire('Saved!', '', 'success')
      } else if (result.isDenied) {
        Swal.fire('Changes are not saved', '', 'info')
      }
    })


  }
}

CodePudding user response:

As clicking the accept/deny button in the dialog is an asynchronous operation, you could return a promise on this function to return data:

confirm() {
    return new Promise<YourResponseType>((resolve, reject) => {
        Swal.fire({
            title: 'Do you want to save the changes?',
            showDenyButton: true,
            showCancelButton: true,
            confirmButtonText: 'Save',
            denyButtonText: `Don't save`,
        }).then(result => {
            if (result.isConfirmed) {
                Swal.fire('Saved!', '', 'success');

                resolve(yourDataSuccess);
                return;
            }

            if (result.isDenied) {
                Swal.fire('Changes are not saved', '', 'info');

                reject(yourDataDenied);
                return;
            }

            reject(yourDataDefault); // this is an "otherwise" return, to catch possible other paths from this dialog business rules. Might not be necessary
        });
    });
}

Than from the component, when calling the service function you can receive the data from promises callbacks:

   yourComponent.confirm().then(
     (yourDataSuccess) =>  {
        // do something
     },
     (yourDataDenied) =>  {
        // do something
     },
   )
  • Related