Angular 2 send data from component to service

Question

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?

Solution

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.

Comments

[IntoTheDeep]

Where MyData in component2 came from?

[SrAxi]

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.

[IntoTheDeep]

Can I set two parameters? Let say two separate strings? Do I need two subjects and two Observables?

[SrAxi]

Send a second parameter in the same method. w3schools.com/js/js_function_parameters.asp

[Nad G]

Hi, I find your solution pretty accurate but I'm having a trouble in the receiver component, so let me ask you a question: the data returned from the subscribe must be an Array of even objects are fine?

[SrAxi]

@NadG Hello! Can be any type of data actually. You can send a Number, String, Object, Array...

[Nad G]

@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!

[Debo]

receiver component not getting the data

[SrAxi]

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.