updating variable changes in components from a service with angular2

Question

My app has a NameService which holds the name.

There are two child components of App, Navbar and TheContent which reference this service. Whenever the name changes in the service, i want it to update in both of the other components. How can i do this?

import {Component, Injectable} from 'angular2/core'

// Name Service

@Injectable()
class NameService {
  name: any;
  constructor() {
    this.name = "Jack";
  }
  change(){
    this.name = "Jane";
  }
}

// The navbar
@Component({
  selector: 'navbar',
  template: '<div>This is the navbar, user name is {{name}}.</div>'
})
export class Navbar {
  name: any;
  constructor(nameService: NameService) {
    this.name = nameService.name;
  }
}

// The content area
@Component({
  selector: 'thecontent',
  template: '<div>This is the content area. Hello user {{name}}. <button (click)=changeMyName()>Change the name</button></div>'
})
export class TheContent {

  name: any;

  constructor(public nameService: NameService) {
    this.name = nameService.name;
  }
  changeMyName() {
       this.nameService.change();
     console.log(this.nameService.name);
  }
}


@Component({
  selector: 'app',
  providers: [NameService],
  directives: [TheContent, Navbar],
  template: '<navbar></navbar><thecontent></thecontent>'
})
export class App {
  constructor(public nameService: NameService) {
  }
}

Theophilus Omoregbee · Accepted Answer · 2017-06-07 10:59:39Z

113

Provide an event in the service and subscribe to it in the components:

@Injectable()
class NameService {
  name: any;
  // EventEmitter should not be used this way - only for `@Output()`s
  //nameChange: EventEmitter<string> = new EventEmitter<string>();
  nameChange: Subject<string> = new Subject<string>();
  constructor() {
    this.name = "Jack";
  }
  change(){
    this.name = 'Jane';
    this.nameChange.next(this.name);
  }
}

export class SomeComponent { 
  constructor(private nameService: NameService) {
    this.name = nameService.name;
    this._subscription = nameService.nameChange.subscribe((value) => { 
      this.name = value; 
    });
  }

  ngOnDestroy() {
   //prevent memory leak when component destroyed
    this._subscription.unsubscribe();
  }
}

See also
angular.io - COMPONENT INTERACTION - Parent and children communicate via a service

edited Jun 7, 2017 at 10:59

Theophilus Omoregbee

2,5031 gold badge25 silver badges33 bronze badges

answered Jan 11, 2016 at 5:13

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

23 Comments

Chandermani Over a year ago

Also remember to unsubscribe from the event in the component else, the component instance will not be released. Need to call unsubscribe on the object returned by subscribe function.

Chandermani Over a year ago

let subscription=nameService.nameChange.subscribe((value) => { this.name = value; }); subscription.unsubscribe(). I have faced this issue hence the disclaimer. If subscription has to cancelled from other method, the variable should be class level

Günter Zöchbauer Over a year ago

@micronyks The question was not about keeping the value when reloaded IMHO. For this you need to persist the data to a server and reload it or at least use localstorage, to store it in the browser.

Steve Schrab Over a year ago

I've been try to implement this solution, but I get an error in the service that says property 'emit' does not exist on type 'Subject<string>'. Am I missing something in the above solution? Is there a working Plunkr of this solution?

Günter Zöchbauer Over a year ago

@Scipion In general, if you subscribe imperatively you should unsibscribe imperatively as well. In this case the component that subscribes to this service would probably still execute the callback passed to subscribe() on name change, even when it is already destroyed because the subscription stays active until the component gets garbage collected, which probably won't happen until the subscription is cancelled.

|

hansmaad · Accepted Answer · 2016-01-12 07:18:39Z

24

Since name in NameService is a primitive type, you'll get different instance in the service and your components. When you change name in NameService, the component properties still have the initial value and the binding doesn't work as expected.

You should apply the angular1 "dot rule" here and bind to a reference type. Change NameService to store an object that contains the name.

export interface Info {
   name:string;
}

@Injectable()
class NameService {
  info: Info = { name : "Jack" };
  change(){
    this.info.name = "Jane";
  }
}

You can bind to this object and get updates to the name property automatically.

// The navbar
@Component({
  selector: 'navbar',
  template: '<div>This is the navbar, user name is {{info.name}}.</div>'
})
export class Navbar {
  info: Info;
  constructor(nameService: NameService) {
    this.info = nameService.info;
  }
}

edited Jan 12, 2016 at 7:18

answered Jan 11, 2016 at 8:18

hansmaad

19k9 gold badges59 silver badges97 bronze badges

7 Comments

Michael Kang Over a year ago

This is the way I would do it too. In angular 1 "always have a dot in your model" is a good way to reduce the effort to sync your bindings, it may be appropriate in Angular2 as well, depending on the use case. Without it, using event emitters to sync the model can get tedious.

B Hull Over a year ago

wow, why does this work compared to the EventEmitter way? it feels like so much less work?

hansmaad Over a year ago

@micronyks In angular2 you can have multiple service instances. You should not define providers on both components. This way each component has its own NameService plnkr.co/edit/nScZgT1hsIKHZ7Z5E6u3?p=preview

Mark Rajcok Over a year ago

@BHull, it works because with an object, both the service and the component refer to the same one object... and they each have a reference to that one object. With a primitive type (string, number, boolean), the component gets its own copy of the primitive value in the constructor. Any change you make to the primitive name property in the service is unrelated to any change you make to primitive name property in the component.

Mark Rajcok Over a year ago

"If you change name in NameService you've got a different instance in the service and your components." Even if you don't change the value, the component gets its own name primitive property in the constructor. The initial value of this new primitive property is the value of the name property in the service, at the time of the assignment. The point I'm trying to make is that with primitive types, you never have the same "instance". One with reference types can you get two (or more) things referencing the same instance.

|

Thierry Templier · Accepted Answer · 2016-01-11 09:32:04Z

I think that the solution provided by Günter is the best one.

That said, you must be aware that Angular2 services are singleton that take place into a tree of injectors. This means that:

if you define your service at the application level (within the second parameter of the bootstrap method), the instance can be share by all elements (components and service).
if you define your service at the component level (within the providers attribute), the instance will be specific to the component and its sub components.

For more details of such aspect, you can have a look at the "Hierarchical Dependency Injection" doc: https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html

Hope it helps you, Thierry

Collectives™ on Stack Overflow

updating variable changes in components from a service with angular2

3 Answers 3

23 Comments

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

23 Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related