Angular 2: Ts: Nested functions

Question

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

IAmKale · Accepted Answer · 2017-05-26 17:18:09Z

1

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

edited May 26, 2017 at 17:18

answered May 25, 2017 at 14:01

IAmKale

3,4761 gold badge27 silver badges50 bronze badges

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

2 Comments

Chris Tarasovs Over a year ago

Can it because it is an injectable?

IAmKale Over a year ago

@ChrisTarasovs Take a look at my edit, it's not an @injectable issue, it's an issue with this not being bound to menuService.

hakany · Accepted Answer · 2017-05-25 14:04:25Z

0

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

answered May 25, 2017 at 14:04

hakany

7,2742 gold badges22 silver badges22 bronze badges

5 Comments

Chris Tarasovs Over a year ago

I have updated exactly the way I have it , I am getting that it is not a function but I am calling it correctly.

hakany Over a year ago

I have updated the plunker example which is also working with your code. Would you compare with your code? Please also look where you call loadwidget().

Chris Tarasovs Over a year ago

here is closer to what I have code wise: plnkr.co/edit/XCHsu19UhR9wWxz4VLOx?p=preview

Chris Tarasovs Over a year ago

so I am loading the menu from a object and than onclick I load a function that is in defined in the object and in that function there is a function that I would like to call

hakany Over a year ago

You try to give a method as parameter in an object. This is how I would do in JavaScript but in Typescript I would use the benefits of classes. Instead of using an array in menuService, create an array of menuServices in App.ts and use this for your widgets. Because each menuService object has his own params. example plunker: plnkr.co/edit/Lrx37LFTitDLXETcont9?p=preview. If you want to use html objects with his own logic behind I would recommend to create directives: syntaxsuccess.com/viewarticle/recursive-treeview-in-angular-2.0

Aparigraha · Accepted Answer · 2017-05-26 14:19:29Z

0

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.

answered May 26, 2017 at 14:19

Aparigraha

1771 silver badge7 bronze badges

Collectives™ on Stack Overflow

Angular 2: Ts: Nested functions

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related