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, Feb 16 '18 at 06:15
This much of code will work for sure. Give some more details. — Arun Raj R, Feb 16 '18 at 06:26
you are sending the function as a callback.. use bind. `this.marker.addListener('dragend', this.onMarkerDrop.bind(this));` — Suraj Rao, Feb 16 '18 at 06: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, Feb 16 '18 at 06:29

Vivek Doshi · Answer 1 · 2018-02-16T06:32:26.207

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

Hi @Vivek Doshi, Thank you for your answer. But I've updated my question. Can you please check once. — Sivakumar Tadisetti, Feb 16 '18 at 06:31

score 2 · Accepted Answer · answered Feb 16 '18 at 06:30

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

How to call a function inside another function in Typescript Angular

2 Answers2