CODEWITHSUNDEEP
javascriptangulartypes
Chris Tarasovs
Chris Tarasovs

Reputation: 695

Angular 2: Ts: Nested functions

I'm working on a function and can someone give advice on how to specify a function that is out side a function? Inside the if statment I would like to call the otherfunction().

@Injectable()
export class menuService {
    constructor (){}
    testing(){ console.log('something')}
    loadwidget(){


           // not able to call this function
           this.testing()

    }
}

Error that i get is "this.testing is not a function"

ERROR TypeError: this.testing is not a function
    at Object.menuService.loadwidget (http://localhost:3000/main.bundle.js:755:14)
    at Object.eval [as handleEvent] (ng:///AppModule/tbuttonsComponent.ngfactory.js:36:41)
    at handleEvent (http://localhost:3000/vendor.dll.js:13146:138)
    at callWithDebugContext (http://localhost:3000/vendor.dll.js:14354:42)
    at Object.debugHandleEvent [as handleEvent] (http://localhost:3000/vendor.dll.js:13942:12)
    at dispatchEvent (http://localhost:3000/vendor.dll.js:10121:21)
    at http://localhost:3000/vendor.dll.js:10711:38

https://plnkr.co/edit/XCHsu19UhR9wWxz4VLOx?p=preview

Upvotes: 0

Views: 2587

Answers (3)

IAmKale
IAmKale

Reputation: 3426

That's exactly how you're supposed to access other methods within a class, off of the this keyword. If you're using your class above exactly as it's written out, then the issue is that variableName isn't defined anywhere within customfunction() so it errors out. The console.log() statement in otherfunction() never gets a chance to run because of that.

Edit: I took a look at the Plunker you added in, it turns out it's a scoping issue. I updated the menuService class, using arrow functions to implicitly bind this to menuService, and the third button started working as expected:

export class menuService {
  constructor (){
    // I moved this into the constructor and updated loadingwidget below
    this.menu = [{
      id: 1,
      loadingwidget: () => { this.loadwidget(); },
    }];
  }

  testing(){ 
    console.log('something');
    alert('something');
  }

  loadwidget(){
    this.testing();
  }
}

Here's a working version of your Plunker: https://plnkr.co/edit/sF08cccRb2b0xkfTspVV?p=preview

Upvotes: 1

Aparigraha
Aparigraha

Reputation: 177

This is not because of Injectable and you don't need Injectable also as you are not injecting anything into the service. So you can omit that. But I could see there are few issue in the code like this one,

 menu = [
      {
        id = 1,
        loadingwidget: this.loadwidget
      }
    ]

where it should be 

menu = [
      {
        id:1,
        loadingwidget: this.loadwidget
      }
    ]

and it was not compiled properly. It works just fine.

Upvotes: 0

hakany
hakany

Reputation: 7254

How you have defined should work. If otherfunction() isn't called check you if statement, maybe the comparison doesn't return what you expect.

Please look at this plunker example: https://plnkr.co/edit/4MWYDdeS5cCTDHI64HO2?p=preview

Upvotes: 0

Related Questions