How do I share data between components in Angular 2?

Question

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.

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.

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?

I'm on 2.0.0-alpha.27/ btw

I inject a service through appInjector (edit: now providers) in the @Component 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.

UPDATE: As of Angular 2.0.0 we now have @ngModule where you would define the service under the providers property on said @ngModule. That will ensure the same instance of that service to be passed to each component, service, etc. in that module. https://angular.io/docs/ts/latest/guide/ngmodule.html#providers

UPDATE: A lot has happened to Angular and FE development in general. As @noririco mentioned, you could also use a state management system like NgRx: https://ngrx.io/

Answer 1

A service singleton is a nice solution. Other way - data/events bindings.

Here is an example of both:

class BazService{   n: number = 0;   inc(){     this.n++;   } }  @Component({   selector: 'foo' }) @View({   template: `<button (click)="foobaz.inc()">Foo {{ foobaz.n }}</button>` }) class FooComponent{   constructor(foobaz: BazService){     this.foobaz = foobaz;   } }  @Component({   selector: 'bar',   properties: ['prop'] }) @View({   template: `<button (click)="barbaz.inc()">Bar {{ barbaz.n }}, Foo {{ prop.foobaz.n }}</button>` }) class BarComponent{   constructor(barbaz: BazService){     this.barbaz = barbaz;   } }  @Component({     selector: 'app',     viewInjector: [BazService] }) @View({   template: `     <foo #f></foo>     <bar [prop]="f"></bar>   `,   directives: [FooComponent, BarComponent] }) class AppComponent{}  bootstrap(AppComponent); 

Watch live