Angular - Sweetalrt2 redirects before I click OK

Question

I am using Angular-7 for my web application. In the project, I applied sweetalert2.

client.component.ts

import { Component, OnInit, ElementRef, NgZone, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
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';
import { FormControl } from "@angular/forms";
import { MapsAPILoader } from '@agm/core';

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

The issue I have is that when I clicked on submit button, the page redirects to landing page before the sweetalert2 message pops up. How do I resolve this?

what is the expected behavior you have `this.router.navigateByUrl('/landing')` in the subscribe complete method — joyBlanks, Sep 20 '19 at 03:20

score 0 · Answer 1 · answered Sep 20 '19 at 03:19

The issue is with the this.router.navigateByUrl('/landing') statement. You should put it inside the success. The subscribe take the third argument for oncomplete operation.

Try something like this.

response => {
  swal.fire(
    'Congratulations!',
    'Your Quote have been successfully received. You will hear from us shortly through the provided email. Thank you!',
    'success'
  );
this.router.navigateByUrl('/landing')
  },

You can read more about it here .

score 0 · Answer 2 · answered Sep 20 '19 at 04:47

0

swal({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        type: 'warning',
        showCancelButton: true,
        confirmButtonClass: 'btn btn-success',
        cancelButtonClass: 'btn btn-danger',
        confirmButtonText: 'Yes, delete it!',
         buttonsStyling: false
      }).then((result) => {
        if (result.value) {
          this.router.navigateByUrl('/landing');
        }
      })

answered Sep 20 '19 at 04:47

XPowerDev

164
1
6

Your explanation has somehow given me a clue. But the only issue is that I am not deleting. After it submits (saves to database). swal brings success message. When OK button is clicked, it redirects to /landing. Note: it should only redirect to database when OK button is clicked – ayobamilaye Sep 20 '19 at 05:23

Angular - Sweetalrt2 redirects before I click OK

2 Answers2