Close modal window from angular component

Question

I need to close my modal window from the angular component, after successfully recording; but the code doesn't work for me; how can I do?

Angular CLI: 6.0.8
Node: 10.16.3
OS: win32 x64

--exp.component.html

  <div class="modal fade bd-example-modal-lg" id="modalExperience" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">

--exp.component.ts

import { Component, OnInit, Injectable, Inject, ElementRef } from '@angular/core';
import Swal from 'sweetalert2';

private element: any;
constructor(
    private el: ElementRef, @Inject('BASE_URL') baseUrl: string
) {
    this.url = baseUrl;
    this.element = el.nativeElement;
}
Swal.fire({
    title: 'Great',
    html: res.mensaje,
    type: 'success'
}).then((result) = > {
    if (result.value) {
        //close modal -- it does not work
        this.element.style.display = 'none';
        document.body.classList.remove('modalExperience');
    }
});

With this code all the windows are closed, I see that it affects the selector of the component and the dark shadow of the modal remains. Please tell me what is the right way!

Try using the angular npm package for sweetalert, https://github.com/sweetalert2/ngx-sweetalert2 — Jason White, Oct 29 '19 at 17:30

score 0 · Answer 1 · answered Oct 29 '19 at 17:40

0

You need to call .close() method of sweetalert popup in order to close dialog. For example -

Swal.fire({
          title: 'Great',
          html: res.mensaje,
          type: 'success'
        }).then((result) => {
          if (result.value) {
            Swal.close();    // -->> This should work 
            this.element.style.display = 'none';
            document.body.classList.remove('modalExperience');
          }
        });

answered Oct 29 '19 at 17:40

Pardeep Jain

84,110
37
165
215

It's not about closing the Swal.fire alert; I have a first window with a list of "work experiences" and an "add experience" button that opens a modal window. After the confirmation of recording appears in a Swal.fire alert, there, in the component.ts is where I want to close the modal window. – FEC Oct 31 '19 at 21:30
Yes I got it, you can close any instance of swal alert by doing so in any component, I hope this clears more. – Pardeep Jain Nov 01 '19 at 01:59
Hello Thank you for your response, but as I say, it is not about closing the Swal.fire alert, that alert closes well. it is about closing the window from typescript after confirming that it was added or edited correctly. I hope you understand what I need. – FEC Nov 03 '19 at 22:12

score 0 · Accepted Answer · answered Nov 03 '19 at 23:37

0

I found the solution with a much earlier post right here on stackoverflow; Close bootstrap modal using typescript in angular 2

answered Nov 03 '19 at 23:37

FEC

1
1
4

Close modal window from angular component

2 Answers2