How to share data between components using a service properly?

Question

I am learning angular2 and was able to share data between sibling components using input/output.

Here is my working example.

//our root app componen         


        

Answer 1

You can always just create a binding to a variable on a service from two different components. In this example one component increments a number and the other component displays the value

You won't be able to detect and respond to changes with this approach. A more robust approach would be to use an observable to broadcast changes to the state in your service. e.g.

import {BehaviorSubject} from "rxjs/BehaviorSubject"

export class MyService {
    private state$ = new BehaviorSubject<any>('initialState');

    changeState(myChange) {
        this.state$.next(myChange);
    }

    getState() {
        return this.state$.asObservable();
    }
}

Then your components could subscribe to state changes and change the state by calling custom methods on the service. I have a concrete example of this approach here https://github.com/robianmcd/ng2-redux-demo/blob/redux-demo-with-service/app/user.service.ts