Typescript, JQuery, Angular and 'this' scope

Question

There are times in Typescript when 'this' gets a little ambiguous. Often, what I can do is call one function from another while binding 'this', e.g.

this.myFunction.bind(this);

That way, when myFunction() calls this.whatever(), it knows what 'this' is.

In this particular case however, I'm a little lost. I am combining JQuery with Angular which, honestly, is never recommended, but sometimes you gotta work with what you're given. Anyway, the code below that is calling the function named "getSlice()" is inside of a JQuery loop which is being called from a ngAfterViewInit() event function. How do I properly call getSlice() so that the code can find it?

getSlice(val): TimeSlice {
    const data = val.split(' ');
    const slice = new TimeSlice(val[0], val[1], val[2]);
    return slice;
}

ngAfterViewInit(): void {
    let current: TimeSlice = new TimeSlice();
    $('#selectable').selectable({
        stop: function() {
            const result = $('#select-result').empty();
            $('li.ui-selected', this).each(function() {
                const val = $(this).attr('value');
                current = this.getSlice(val); <!-- Here is the problem child -->
            });
        }
    });
}

Inside ngAfterViewInit => const $_self = this, then call $_self.getSlice() from jquery each. — Luciano
– Luciano, Commented Oct 31, 2018 at 16:41
Possible duplicate of How to access the correct `this` inside a callback? — Martin Parenteau
– Martin Parenteau, Commented Oct 31, 2018 at 16:43

Frank Modica · Accepted Answer · 2018-10-31 16:41:07Z

3

You could create the function beforehand to be safe:

ngAfterViewInit(): void {
    let getSlice = val => this.getSlice(val);

    // Or do this
    // let getSlice = this.getSlice.bind(this);

    $('#selectable').selectable({
        stop: function() {
            const result = $('#select-result').empty();
            $('li.ui-selected', this).each(function() {
                const val = $(this).attr('value');
                current = getSlice(val);
            });
        }
    });
}

answered Oct 31, 2018 at 16:41

Frank Modica

10.5k4 gold badges27 silver badges42 bronze badges

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

Comments

Sunil · Accepted Answer · 2018-10-31 16:49:48Z

2

You can keep the reference of the this context. So you can use it later in the in nested functions later.

getSlice(val): TimeSlice {
    const data = val.split(' ');
    const slice = new TimeSlice(val[0], val[1], val[2]);
    return slice;
}

ngAfterViewInit(): void {
    let self =  this; //<-- keep `the` reference of Component
    let current: TimeSlice = new TimeSlice();
    $('#selectable').selectable({
        stop: function() {
            const result = $('#select-result').empty();
            $('li.ui-selected', this).each(function() {
                const val = $(this).attr('value');
                current = self.getSlice(val); <!-- Use self here -->
            });
        }
    });
}

edited Oct 31, 2018 at 16:49

answered Oct 31, 2018 at 16:41

Sunil

11.3k2 gold badges29 silver badges48 bronze badges

Collectives™ on Stack Overflow

Typescript, JQuery, Angular and 'this' scope

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related