Angular2 - Sweetalert custom button click doesn´t work

Question

I create a custom button inside a footer in Sweetalert2 like this.

    Swal.fire({
          icon: "question",
          showCancelButton: true,
          confirmButtonColor: "#1976d2",
          cancelButtonText: "No",
          confirmButtonText: "Sí",
          footer: "<button (click)='withoutread()' class='btn btn-info'>Test</button>"
  })

  withoutread() {
    console.log('hello');
  }

The problem: The function withoutread doesn´t call properly, console.log('hello') doesn´t show hello in console.

So: What´s wrong in this code?

afaik (click) is angular syntax, and angular does not recompile the code therefore it will not work. Not sure if plain js onclick function would work though. — Jonathan Niu, Jul 03 '20 at 07:24
You can refer this: https://stackoverflow.com/questions/39268318/more-than-2-buttons-on-sweetalert-2 — Rohit Tagadiya, Jul 03 '20 at 08:39

score 1 · Answer 1 · answered Jul 06 '20 at 19:12

1

Working !

Swal.fire({
  icon: 'error',
  title: 'Oops...',
  text: 'Something went wrong!',
  footer: '<button id="buttonId">Test</button>'
})

document.getElementById('buttonId').onclick = function(){
    alert('do Something');
}

answered Jul 06 '20 at 19:12

Tushar Wasson

494
5
10

Inside that onclick handler, how can we access any typescript variable? – Naseem Ahamed Apr 12 '22 at 11:18
Just pass the variable in function document.getElementById('buttonId').onclick = function(var1 , var2){//body} – Tushar Wasson Apr 13 '22 at 12:04
Those are variables within the event scope. Can a JS event handler access the typescript local and instance variables? For example, `sampleFunction(traceId){` Swal.fire({ icon: 'error', title: 'Oops...', text: 'Something went wrong!', footer: '' }) `document.getElementById('buttonId').onclick = function(){ //May I know how I can access the traceId local variable here? }` } – Naseem Ahamed Apr 14 '22 at 09:35

DevMike · Answer 2 · 2020-07-03T08:00:18.367

0

Your click method in the way you have implemented it would not be accessible since the method withoutread() exists outside of the scope of the SweetAlert instance.

Aside from the SweetAlert configurations available for capturing user input, you could include a third, custom button and capture the click using event delegation as described here

edited Jul 03 '20 at 08:00

answered Jul 03 '20 at 07:14

DevMike

1,630
2
19
33

I want to add a third button to sweetalert2 modal, so this it doesn´t is that i need. – El Hombre Sin Nombre Jul 03 '20 at 07:32
It would be possible using event delegation. I'll update the answer. – DevMike Jul 03 '20 at 07:47

Wasim · Answer 3 · 2020-07-03T08:21:13.993

0

Try this

footer: "<a><button (click)='withoutread()' class='btn btn-info'>Test</button></a>"

OR

footer: "<a onclick='withoutread()'><button class='btn btn-info'>Test</button></a>"

edited Jul 03 '20 at 08:21

answered Jul 03 '20 at 07:54

Wasim

600
2
11
32

score 0 · Answer 4 · answered Jul 03 '20 at 14:14

You have to user onclick rather than (click). Please look at the below working code.

Swal.fire({
      icon: "question",
      showCancelButton: true,
      confirmButtonColor: "#1976d2",
      cancelButtonText: "No",
      confirmButtonText: "Sí",
      footer: "<button onclick='withoutread()' class='btn btn-info'>Test</button>"
})
 function withoutread() {
     alert('dd') 
 }

You can also review the JSFiddle link here

Angular2 - Sweetalert custom button click doesn´t work

4 Answers4