Angular TypeScript Undefined result outside function. Send the result like output param

Question

Hello please can you help me on this problem I m new in Angular and TS.

I have a function that I need to send it like an output parameter because in the next step I will call it from other component. My problem now that I get the good result only inside the function but outside I get 2undefined. I have the commented line this.tab= result; work but I need to send the result first like a parameter because after i will call this function from other component.

Thanks in advance.

 export class A implements OnInit {
      tab= [];



    
         ngOnInit(): void {
          this.getResult(this.isDeprecated,this.tab);                     
            console.debug('2'+this.tab);     **//2undefined**
          }


        
          getResult(isDeprecated: boolean,wl:any) {            
            this.Service1.GetOnly(isDeprecated).subscribe(
              (result) => {
                if (result) {
                // this.tab= result;  **It work**
                   wl= result;
                  console.debug('1'+result);    **//I get result only inside function**          
                }
              },
              (error) => {
                console.log(error);
              }
            );
          }

`getResult()` calls `this.service1.GetOnly` which is `async`, by the time you `console.log('2'+this.tab);` the result from service has not yet arrived. What is your use case? — HassanMoin, Feb 05 '22 at 19:59
You can send your data to the other component, inside the `.subcribe()` block when you receive the data — HassanMoin, Feb 05 '22 at 20:01
Does this answer your question? [How do I return the response from an Observable/http/async call in angular?](https://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular) — R. Richards, Feb 05 '22 at 20:08
@HassanMoin ,@R. Richards ,you can see my real problem In the second post. Thanks for the support. — oami89, Feb 05 '22 at 20:53

score 0 · Answer 1 · answered Feb 05 '22 at 20:45

0

My original code it working in the Component 1 but I need to call it from another component. My real problem is on the Component 2. Thanks a lot for help.

component 1:

export class A implements OnInit {
      tab= [];

         ngOnInit(): void {
          this.getResult(this.isDeprecated,this.tab);                     
            console.debug('2'+this.tab);     **//It work**
          }


        
          getResult(isDeprecated: boolean,wl:any) {            
            this.Service1.GetOnly(isDeprecated).subscribe(
              (result) => {
                if (result) {
                   this.tab= result;  **It work**
                  console.debug('1'+ this.tab);    **//It work**          
                }
              },
              (error) => {
                console.log(error);
              }
            );
          }

component 2:

export class B implements OnInit {
      tab= [];


 ngOnInit(): void {
          this.getResult(this.isDeprecated,this.tab);                     

this.A=new A();

  this.A.getResult(this.isDeprecated, this.tab);         


          }

answered Feb 05 '22 at 20:45

oami89

11
2

Why don't you just call the `this.Service1.GetOnly()` service method from component B, as you are also sending the same parameters to component A. – HassanMoin Feb 05 '22 at 20:52
GOOD idea available for this case but I have others complexes functions.If I didn't succeed on this simple function It will be more complicated for the others. – oami89 Feb 05 '22 at 21:02
it's not good practice to call one's component method in another. It means they are tightly coupled. For HTTP-based methods, you can just move them to a service, as you did with `Service1`, and inject that wherever is needed. There are different methods of how you can share data between components depending upon their relationships. I suggest you read this: https://levelup.gitconnected.com/5-ways-to-share-data-between-angular-components-d656a7eb7f96 – HassanMoin Feb 05 '22 at 21:19
You should create a `service` that shares the results of the complex function from one component to another. or move those complex functions to a `Service2` so that you have those complex functions only in one place and easily accessible by components. – HassanMoin Feb 05 '22 at 21:21

Angular TypeScript Undefined result outside function. Send the result like output param

1 Answers1