Angular - How to fix error TS2345: Argument of type 'Promise<SweetAlertResult>' is not assignable to parameter of type '(value: Object) => void'

Question

I am trying to use sweetalert2 in my Angular-7. After successful installation, I wrote this code in the component:

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../shared/services/api.service';
import { TokenService } from '../../shared/services/token.service';
import { Router } from '@angular/router';
import { SnotifyService } from 'ng-snotify';
import swal from 'sweetalert2';

@Component({
  selector: 'app-client-quotes-landing',
  templateUrl: './client-quotes-landing.component.html',
  styleUrls: ['./client-quotes-landing.component.scss']
})
export class ClientQuotesLandingComponent implements OnInit {

public form = {
  first_name : null,
  last_name : null,
  email : null,
  phone : null,
  address : null,
  business_name : null,
  truck_required : null,
  truck_type : null,
  quote_origin : null,
  quote_destination : null,
  commodity : null,
  loading_date : null,
  comment : null,
};

public error = {
  'first_name' : null,
  'last_name' : null,
  'email' : null,
  'phone' : null,
  'address' : null,
  'business_name' : null,
  'truck_required' : null,
  'truck_type' : null,
  'quote_origin' : null,
  'quote_destination' : null,
  'commodity' : null,
  'loading_date' : null,
  'comment' : null
};

constructor(
private api: ApiService,
private token: TokenService,
private router: Router,
private notify: SnotifyService
) { }

ngOnInit() {
window.dispatchEvent(new Event('load'));
window.dispatchEvent(new Event('resize'));
}

onSubmit(){
 this.notify.clear();
 var header = {
  'Content-Type': 'application/json'
 }
return this.api.post('signup', this.form, header).subscribe(
  swal.fire(   // line 68
    'Congratulations!',
    'Your Quote have been successfully received. You will hear from us shortly through the provided email. Thank you!',
    'success'
  ),
  error => this.errorHandle(error)
);
}

errorHandle(error){
 this.notify.clear();
 console.log(error);
 this.error = error.error.errors;
 }
 }

After submit button is clicked, I want success message to be displayed. When I served it, I got this error:

sweetalert error

Line 68 in the error is here:

 swal.fire(   //line 68
 'Congratulations!',
 'Your Quote have been successfully received. You will hear from us shortly through the provided email. Thank you!',
 'success'
 ),

The installation of the sweetalert2 did not give any error. How do I resolve this error?

Answer 1

You first need to solve your subscribe response, by wrapping your `swal.fire in a response function like so:

response => {
          swal.fire(...),
},

End result like this:

return this.api.post('signup', this.form, header).subscribe(
        response => {
          swal.fire(   // line 68'Congratulations!','Your Quote have been successfully received. You will hear from us shortly through the provided email. Thank you!','success'),
        },
        error => this.errorHandle(error)
      );