17

My target is to send data from Angular component to service and use service methods to work on it. Example:

export class SomeComponent {
    public data: Array<any> = MyData;
    public constructor(private myService: MyService) {
      this.myService.data = this.data;
    }
}

and service:

@Injectable()
export class TablePageService {
    public data: Array<any>;
    constructor() {
        console.log(this.data);
        // undefined
    }
}

Getting data is undefined. How to make it works?

Improve this question
6
  • 2
    The service constructor has already been run by the time you inject it into your component - since you don't initialize it, data is undefined at that time. Commented May 19, 2017 at 9:56
  • Before you can call a method on an object, it has to be constructed. Therefore your constructor is called and data is undefined. Then afterwards you access the member and modify the variable, but the constructor has been already called. Commented May 19, 2017 at 9:57
  • How can I fix that? Commented May 19, 2017 at 9:58
  • 1
    I would suggest you use methods to communicate between component and services. Also use subscriptions to make sure you receive the data when is available. Check documentation here, very useful: angular.io/docs/ts/latest/cookbook/… Commented May 19, 2017 at 9:58
  • This is Typescript and not JavaScript, or? Commented May 19, 2017 at 11:25

2 Answers 2

Reset to default
32

An example if interaction between service and component could be:

Service:

@Injectable()
export class MyService {
    myMethod$: Observable<any>;
    private myMethodSubject = new Subject<any>();

    constructor() {
        this.myMethod$ = this.myMethodSubject.asObservable();
    }

    myMethod(data) {
        console.log(data); // I have data! Let's return it so subscribers can use it!
        // we can do stuff with data if we want
        this.myMethodSubject.next(data);
    }
}

Component1 (sender):

export class SomeComponent {
    public data: Array<any> = MyData;

    public constructor(private myService: MyService) {
        this.myService.myMethod(this.data);
    }
}

Component2 (receiver):

export class SomeComponent2 {
    public data: Array<any> = MyData;

    public constructor(private myService: MyService) {
        this.myService.myMethod$.subscribe((data) => {
                this.data = data; // And he have data here too!
            }
        );
    }
}

Explanation:

MyService is managing the data. You can still do stuff with data if you want, but is better to leave that to Component2.

Basically MyService receives data from Component1 and sends it to whoever is subscribed to the method myMethod().

Component1 is sending data to the MyService and that's all he does. Component2 is subscribed to the myMethod() so each time myMethod() get called, Component2 will listen and get whatever myMethod() is returning.

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

8 Comments

Where MyData in component2 came from?
I just took it from your code: public data: Array<any> = MyData;. It could also be declared as public data = {}; for example, depends on the data type you are working with. I just wanted to keep it close to your example so it's more understandable for you.
Can I set two parameters? Let say two separate strings? Do I need two subjects and two Observables?
Send a second parameter in the same method. w3schools.com/js/js_function_parameters.asp
@SrAxi, snap, I was hoping that the problem is the type of the data xD Well, good to know that it can be of any type. Thank you for your answer!
|
0

There is a small issue with the receiver component in @SrAxi s reply as it can't subscribe to the service data. Consider using BehaviorSubject instead of Subject. It worked for me!

private myMethodSubject = new BehaviorSubject<any>("");
Improve this answer

1 Comment

BehaviorSubject is just a specialization of Subject that takes the latest value from the stream of data. The isse is probably not the type of Subject in your code, probably the issue is related to when you're subscribing.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.