How to call a function inside another function in Typescript Angular

Question

I am new to Angular 2. I wrote below code in Angular

export class TestClass {

    constructor() {
        this.initMap();
    }

    initMap() {
        this.marker.addListener('dragend', this.onMarkerDrop);
    }

    onMarkerDrop(event) {
        this.functionTwo(); // Getting error this.functionTwo is not a function
    }

    functionTwo() {

    }
}

Note: Before asking this question I searched in stackoverflow I got these links

'this.function' is not a function - OO JS

this.function is not a function :typescript

Angular - this.function is not a function

They are saying that use Arrow functions to call other member functions. But I don't know how to implement their suggestions in my code. Might I didn't understood them correctly.

I want help from you like, how to call this.functionTwo() using arrow function from functionOne();

Thank you for your help.

This will work 100% fine , there should be something more than this code — Vivek Doshi
– Vivek Doshi, Commented Feb 16, 2018 at 6:15
This much of code will work for sure. Give some more details. — Arun Raj R
– Arun Raj R, Commented Feb 16, 2018 at 6:26
you are sending the function as a callback.. use bind. this.marker.addListener('dragend', this.onMarkerDrop.bind(this)); — Suraj Rao
– Suraj Rao, Commented Feb 16, 2018 at 6:28
Hi VivekDoshi and Arun Raj R, thank you for your response. I have updated my code, Please check once. Actually in the function on onMarkerDrop() I am getting that error. — Sivakumar Tadisetti
– Sivakumar Tadisetti, Commented Feb 16, 2018 at 6:29

Vivek Doshi · Accepted Answer · 2018-02-16 06:32:26Z

6

As per your code updation , you can use it like :

this.marker.addListener('dragend', this.onMarkerDrop.bind(this));
// OR
this.marker.addListener('dragend', ($event) => this.onMarkerDrop($event));

Your code will work 100% fine : (Before Question Updated)

functionOne() {
    this.functionTwo(); // Getting error this.functionTwo is not a function
}

functionTwo() {
    alert('function2');
}

Please check the below code for more clarification

functionOne() {
    // this will throw error this.functionTwo is not a function
    setTimeout(function(){ // normal function
        this.functionTwo();  
    })

    // This wont throw the error
    setTimeout(() => { // fat arrow
        this.functionTwo(); // Getting error this.functionTwo is not a function        
    })
}

functionTwo() {
    alert('function2');
}

Why it will work with fat arrow :

this is picked up from surroundings (lexical). Therefore, you don’t need bind() or that = this, anymore.

With Normal function you need to do bind() or that = this

edited Feb 16, 2018 at 6:32

answered Feb 16, 2018 at 6:25

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

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

2 Comments

Sivakumar Tadisetti Over a year ago

Hi @Vivek Doshi, Thank you for your answer. But I've updated my question. Can you please check once.

Suraj Rao Over a year ago

@VivekDoshi your arrow function example is incorrect

Suraj Rao · Accepted Answer · 2018-02-16 06:30:49Z

2

Your function onMarkerDrop is passed as a callback where the context will change and this will have a different value. Use arrow or bind while sending to preserve context.

this.marker.addListener('dragend', this.onMarkerDrop.bind(this));

or

this.marker.addListener('dragend', ($event)=>this.onMarkerDrop($event));

answered Feb 16, 2018 at 6:30

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

Collectives™ on Stack Overflow

How to call a function inside another function in Typescript Angular

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related