Call a function of the component inside jquery function in Angular 2

Question

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.

Just use arrow function

yurzui
– yurzui

2017-10-10 05:40:14 +00:00
Commented Oct 10, 2017 at 5:40 — yurzui
– yurzui, Commented Oct 10, 2017 at 5:40

Harish Kommuri · Accepted Answer · 2017-10-11 09:12:46Z

7

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.

edited Oct 11, 2017 at 9:12

answered Oct 10, 2017 at 5:54

Harish Kommuri

2,8641 gold badge24 silver badges29 bronze badges

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

Comments

Rahul Singh · Accepted Answer · 2017-10-10 05:44:38Z

2

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 welcomed changes in ES6 .

answered Oct 10, 2017 at 5:44

Rahul Singh

19.7k13 gold badges69 silver badges96 bronze badges

Comments

cambunctious · Accepted Answer · 2017-10-10 05:42:49Z

1

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));

answered Oct 10, 2017 at 5:42

cambunctious

9,8616 gold badges41 silver badges60 bronze badges

Comments

Chandru · Accepted Answer · 2017-10-10 05:59:21Z

1

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');
    }
}

answered Oct 10, 2017 at 5:59

Chandru

11.2k6 gold badges43 silver badges54 bronze badges

Collectives™ on Stack Overflow

Call a function of the component inside jquery function in Angular 2

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related