I am trying to call a function inside the jQuery function. But i am unable use 'this' scope, because it refers to the HTMLElement.

import { Component, Input } from '@angular/core';
import { Injectable }     from '@angular/core';
import * as $ from 'jquery';

@Injectable()
export class ChatService {
   public chatObj : SomeChatObject;

    constructor() { }
    disconnect(){
       console.log("Chat Disconnected");
    }

    beforeReload = $(window).bind("beforeunload",function(){
         //here 'this' is referred to HTML element. So i am not able to call the disconnect method.
         this.disconnect();
    });

}

I am not able to access the 'disconnect' method inside jQuery function. How can i call the 'disconnect' method.

I am trying to call a function inside the jQuery function. But i am unable use 'this' scope, because it refers to the HTMLElement.

import { Component, Input } from '@angular/core';
import { Injectable }     from '@angular/core';
import * as $ from 'jquery';

@Injectable()
export class ChatService {
   public chatObj : SomeChatObject;

    constructor() { }
    disconnect(){
       console.log("Chat Disconnected");
    }

    beforeReload = $(window).bind("beforeunload",function(){
         //here 'this' is referred to HTML element. So i am not able to call the disconnect method.
         this.disconnect();
    });

}

I am not able to access the 'disconnect' method inside jQuery function. How can i call the 'disconnect' method.

• javascript
• jquery
• angular

• 1 Just use arrow function – yurzui Commented Oct 10, 2017 at 5:40

4 Answers 4

Try following.

beforeReload = $(window).bind("beforeunload",() => {
     //here 'this' is referred to HTML element. So i am not able to call the disconnect method.
     this.disconnect();
});

Try defining function as () => {} instead of function() {}. Because this refers its closest function or class. In your case this refers its closest function. Try using () => {} to escape function reference.

As @Yurzui pointed use the arrow functions like this

beforeReload = $(window).bind("beforeunload",() =>{
     // use the arrow function 
     this.disconnect();
});

else if you want to continue using the old syntax use some thing like

beforeReload = $(window).bind("beforeunload",function(){
     //here 'this' is referred to HTML element. So i am not able to call the disconnect method.
     this.disconnect();
}).bind(this); // check this line

The arrow function preserves the value of this inside the function it is one of the most weled changes in ES6 .

You can bind your function to give it a value for this.

beforeReload = $(window).bind("beforeunload", this.disconnect.bind(this));

or

beforeReload = $(window).bind("beforeunload", (function() {
     this.disconnect();
}).bind(this));

Try this :

import { Component, OnInit } from '@angular/core';
declare var jQuery: any;

export class Component implements OnInit {

    constructor() { }

    ngOnInit() {
        jQuery(window).bind('beforeunload', function() {
            this.disconnect();
        }.bind(this));
    }

    disconnect() {
        console.log('disconnect');
    }
}