How to call javascript alert in a typescript component

Question

I am trying to call a custom javascript alert in typescript. The problem is that I can't use "this" keyword in javascript and typescript code does not wait for javascript function to finish.

What I am saying is:

declare var $: any;
declare var swal: any;

...


    delete(id: number) {

        var toDeleteOrNot: boolean = false;

        swal({
            title: "Are you sure?",
            text: "You will not be able to recover this imaginary file!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel plx!",
            closeOnConfirm: false,
            closeOnCancel: false
        }, function (isConfirm: boolean) {
            if (isConfirm) {
                toDeleteOrNot = true;
                swal("Deleted!", "Your imaginary file has been deleted.", "success");
            } else {
                swal("Cancelled", "Your imaginary file is safe :)", "error");
            }
            });

        if (toDeleteOrNot) {
            this.getagentiiService.deleteAgentie(id).subscribe(x => {
                this.populateAgentii();
            });
        }
    }

The function(swal) and the "if" are called at the same time. Var toDeleteOrNot in if maintains its initialization value(in this case it is false). I can't move the "if" inside the javascript because it gives

'this' implicitly has type any because it does not have a type annotation

How can I use this custom javascript function inside typescript?

Typescript is a superset of Javascript. This means that any valid JS file is also a valid TS file. — Jeremy Thille
– Jeremy Thille, Commented Aug 29, 2017 at 13:03
Looks like you're new with the concept of asynchronism :) The swal function is async, so you have to wait for its callback to execute so toDeleteOrNot has a value. — Jeremy Thille
– Jeremy Thille, Commented Aug 29, 2017 at 13:07
@JeremyThille it's not asynchronous. Looks like he uses sweetalert and the function passed to the configuration is an event handler fired after the button click. — Nico Van Belle
– Nico Van Belle, Commented Aug 29, 2017 at 13:13
@GünterZöchbauer out of curiosity, the OP clearly said "typescript component", so it belongs to angular tag, why angularjs then? or am I missing something ? — FAISAL
– FAISAL, Commented Aug 29, 2017 at 13:22

FAISAL · Accepted Answer · 2017-08-29 13:07:10Z

1

You are using the function keyword which is not allowing you to use this. Use the arrow function notation i.e. ( ) => and change your code to following to use this inside:

swal({
    //......
}, (isConfirm: boolean) => {
    if (isConfirm) {
        toDeleteOrNot = true;
        swal("Deleted!", "Your imaginary file has been deleted.", "success");
    } else {
        swal("Cancelled", "Your imaginary file is safe :)", "error");
    }

    if (toDeleteOrNot) {
        this.getagentiiService.deleteAgentie(id).subscribe(x => {
            this.populateAgentii();
        });
    }
});

answered Aug 29, 2017 at 13:07

FAISAL

34.8k10 gold badges102 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

M. Niculescu Over a year ago

Thabk you Faisal! It worked! I have too few points to be able to mark it as an answer...

FAISAL Over a year ago

you can accept the answer by clicking the checkmark, does not depend on the points you have. Or am I wrong here? \o/ read here: meta.stackexchange.com/a/5235

Nico Van Belle Over a year ago

@Faisal He still has to wait a couple of minutes before he can accept the answer. meta.stackoverflow.com/questions/250132/…

Collectives™ on Stack Overflow

How to call javascript alert in a typescript component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related