How to pass a value from ngOnInit to function

Question

I'm wondering how can I pass a value from ngOnInit to function at the same component.

Here is my example. I get data from API, to display context of my page. Later when I click the button I would like to use that data, but in console.log I get undefined. How's that undefined since data was already loaded and displayed on my page.

...
 clientId1;
 clientId2;
 clientNote;
 errorMsg;

 ngOnInit() {
    this.clientId1 = this.route.parent.snapshot.paramMap.get('userId1');
    this.clientId2 = this.getMethodClientId2();
  }

  getMethodClientId2(): void {
    this.userService.getUser().subscribe(
      (data) => {
        this.clientNote = data.ClientNotes;
      },
      (error) => (this.errorMsg = error)
    );
  }


  postMethodOnClick() {
    console.log(this.clientId1);
    console.log(this.clientId2);
}
...

Please create a [small demo](https://stackoverflow.com/help/minimal-reproducible-example) for this using [codesandbox.io](https://codesandbox.io/) to show the issue happening. You can use a fake API call to show the demo. — palaѕн, Jun 17 '20 at 12:27
The `getMethodClientId2()` method does not return anything, so how do you expect `console.log(this.clientId2)` to show anything else but `undefined` :)? — Poul Kruijt, Jun 17 '20 at 12:31
I don't see where clientId2 is being set. Is it suppose to be set in getMethodClientId2()? — flyboy78, Jun 17 '20 at 12:33
Have a look at [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Liam, Jun 17 '20 at 12:36
that said `getMethodClientId2` never returns anything so I'm not clear what you're expecting `this.clientId2 = this.getMethodClientId2();` to do or what you expect `this.clientId2` to contain? — Liam, Jun 17 '20 at 12:37

ruth · Answer 1 · 2020-06-17T12:38:57.823

There are multiple issues here.

The variable clientNote is assigned value asynchronously. So if you were to access the data outside the subscription, you have no context of whether the data is assigned or not.
clientId2 variable does not hold the possible cliend ID, it holds nothing at the moment. Judging by the names of your function, I believe you were trying to do this

 ngOnInit() {
    this.clientId1 = this.route.parent.snapshot.paramMap.get('userId1');
    this.getMethodClientId2();    // <-- don't assign here, you aren't returning anything from the asynchronous function
  }

  getMethodClientId2(): void {
    this.userService.getUser().subscribe(
      (data) => {
        this.clientNote = data.ClientNotes;
        this.clientId2 = data.ClientId;  // <-- I assume the property is called `ClientId`.
      },
      (error) => (this.errorMsg = error)
    );
  }

Again, variable this.clientId2 is assigned asynchronously, so if you were to call the function postMethodOnClick() before the values are assigned, the console log will still be undefined.

See here for more info on how to access async data.

How to pass a value from ngOnInit to function

1 Answers1