CODEWITHSUNDEEP
javascriptangulartypescriptpromiseobservable
Anand Rockzz
Anand Rockzz

Reputation: 6668

Convert a Promise to Observable

trying to convert swal's first promise function to observable and trying to use the cancel action. Can someone help me with the syntax pls.

swal({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!',
  cancelButtonText: 'No, cancel!',
  confirmButtonClass: 'btn btn-success',
  cancelButtonClass: 'btn btn-danger',
  buttonsStyling: false
}).then(function () {
  swal(
    'Deleted!',
    'Your file has been deleted.',
    'success'
  )
}, function (dismiss) {
  // dismiss can be 'cancel', 'overlay',
  // 'close', and 'timer'
  if (dismiss === 'cancel') {
    swal(
      'Cancelled',
      'Your imaginary file is safe :)',
      'error'
    )
  }
})

So far I have the following:

export class DialogService {
    confirm(title: string, message: string):Observable<any> {
        return Observable.fromPromise(swal({
            title: title,
            text: message,
            type: 'warning',
            showCancelButton: true
        }));
    }; }

How do I add the function (dismiss) function in the above?

Upvotes: 3

Views: 8376

Answers (4)

Michael Tony
Michael Tony

Reputation: 1

Hi you can simply wrap this around a from operator which can be used to convert a promise to an observable!

Example

from(
  Swal.fire({
    icon: 'warning',
    title: 'Would you like to delete this card?',
    showConfirmButton: true,
    showDenyButton: true,
    allowOutsideClick: false,
    denyButtonText: 'Cancel',
  })
).subscribe(result => {
  if (result.isConfirmed) {
  //  do what you like here
  }
});

Upvotes: 0

Anand Rockzz
Anand Rockzz

Reputation: 6668

Nvm, I ended up with the following,..

    return Observable.create((observer) => {
        if (component.isUntouched()) {
            observer.next(true);
        } else {
            swal({
                title: 'Sure?',
                text: 'Not saved, are you sure?',
                type: 'warning',
                showCancelButton: true
            }).then(() => {
                observer.next(true);
            }, () => {
                observer.next(false);
            })
        }
    });

Just for completeness, the component.isUntouched() is defined as follows:

@ViewChild('appForm') appForm: NgForm;
... 
isFormTouched():boolean{
    return this.eventForm.dirty;
}

And in the template/html:

<form class="form form-horizontal" (ngSubmit)="submitEvent()" #appForm="ngForm">
  ..
</form>

Upvotes: 2

Edmundo Santos
Edmundo Santos

Reputation: 8287

Once you subscribe to the Observable, you can pass the 'catch' case from Promise.

const subscription = Observable.fromPromise(...).subscribe(
  function () {
    console.log('Deleted!');
   },
  function (dismiss) {
    console.log('Dismiss', dismiss);
  })

Note that this will only work if it's a valid Promises/A+ spec.

More info here: https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/frompromise.md

Upvotes: 3

El houcine bougarfaoui
El houcine bougarfaoui

Reputation: 37403

I'm not sure that swal use native Promise api, I think it uses A promise library for JavaScript like q or something else.

export class DialogService {
    confirm(title: string, message: string):Observable<any> {
       return Observable.create( (observer: any) => {
                 swal({
                   title: title,
                   text: message,
                   type: 'warning',
                   showCancelButton: true
                 }).then((data)=>{
                    observer.next(data);
                 },(reason)=>{
                    observer.error(reason);
                 })
            })
     }
}

Upvotes: 3

Related Questions