title: How do I share data between components in Angular 2?
body: <p>In Angular 1.x.x you simply ask for the same service and you end up with the same instance, making it possible to share the data in the service.</p>
  
  <p>Now in Angular 2 I have a component that has a reference to my service. I can read and modify the data in the service, which is good. When I try to inject the same service in another component, it seems as if I get a new instance.</p>
  
  <p>What am I doing wrong? Is it the pattern itself that is wrong (using a service to share data) or do I need to mark the service as a singleton (within one instance of the app) or something?</p>
  
  <p>I'm on <code>2.0.0-alpha.27/</code>  btw</p>
  
  <p>I inject a service through <code>appInjector</code> (edit: now <code>providers</code>) in the <code>@Component</code> annotation and then save a reference in the constructor. It works locally in the component - just not across components (they do not share the same service instance) like I thought they would.</p>
  
  <p><strong>UPDATE</strong>: As of Angular 2.0.0 we now have @ngModule where you would define the service under the <code>providers</code> property on said <code>@ngModule</code>. That will ensure the same instance of that service to be passed to each component, service, etc. in that module.
  <a href="https://angular.io/docs/ts/latest/guide/ngmodule.html#providers" rel="noreferrer">https://angular.io/docs/ts/latest/guide/ngmodule.html#providers</a></p>
  
  <p><strong>UPDATE</strong>: A lot has happened to Angular and FE development in general. As @noririco mentioned, you could also use a state management system like NgRx:
  <a href="https://ngrx.io/" rel="noreferrer">https://ngrx.io/</a></p>