Angular 2+ detect object property change inside service

Question

Let's say we have a service like this one:

SupermanService {
  private _superman: Hero;
  public supermanReplaced = new EventEmitter<Hero>();
  public supermanPropertyUpdated = new EventEmitter<Hero>();

  public get superman(): Hero {
    return this._superman;
  }

  public set superman(superman): void {
    this._superman = superman;
    this.supermanReplaced.emit(superman);
  }

  public updateSupermanProperty(key: string, val: string | number): Hero {
    this._superman[key] = val;
    this.supermanPropertyUpdated.emit(superman);
    return this._superman;
  }

}

Is there some way to detect supermanPropertyUpdated without using the updateSupermanProperty() function but by e.g. setting this.superman.power = 10?

I found some posts that suggest the KeyValueDiffer in combination with the DoCheck hook, but that is not available for services.

sevic · Accepted Answer · 2019-01-15 13:29:52Z

2

You can use get/set methods.

In your example:

class SupermanService {
  private _superman: Hero;
  public supermanReplaced = new EventEmitter<Hero>();
  public supermanPropertyUpdated = new EventEmitter<Hero>();

  public set power(level: integer) {
    this._superman.power = level;
    this._supermanPropertyUpdated.emit(this._superman);
  }

  public get superman(): Hero {
    return this._superman;
  }

  public set superman(superman: Hero): void {
    this._superman = superman;
    this.supermanReplaced.emit(superman);
  }

  public updateSupermanProperty(key: string, val: string | number): Hero {
    this._superman[key] = val;
    this._supermanPropertyUpdated.emit(superman);
    return this._superman;
  }

}

After this you can use:

SupermanService.power = 10;

and all the listeners will be notified

Update

Another implementation to solve this problem is modifying your Hero class adding a public EventEmitter property and subscribing to this from your service. Assign a setter for each property on your Hero class and emit the change like Output and in your service you can emit the changes.

class Hero {

    public onPropertyChange = new EventEmitter<Hero>();
    private _name: string;

    get name(): string {
        return this._name;
    }

    set name(value: string) {
        this._name = value;
        this.onPropertyChange.emit(this);
    }
}

class SupermanService {
  private _superman: Hero;
  public supermanReplaced = new EventEmitter<Hero>();

  public get superman(): Hero {
    return this._superman;
  }

  public set superman(superman: Hero): void {
    this._superman = superman;
    this.supermanReplaced.emit(superman);
  }

  public get supermanPropertyUpdated(): EventEmitter<Hero> {
    return this._superman.onPropertyChange;
  }
}

edited Jan 15, 2019 at 13:29

sevic

99411 silver badges38 bronze badges

answered Jan 15, 2019 at 12:52

Eugenio Valeiras

1,0201 gold badge10 silver badges30 bronze badges

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

6 Comments

Roberto Zvjerković Over a year ago

It wont notify by changing like this: SupermanService.superman.power = 10. It's just a getter on which you directly change it's property (no setter).

Eugenio Valeiras Over a year ago

I added an Update, you need a code example or I explain myself :)?

sevic Over a year ago

hmmm that's very similar to the updateSupermanProperty() function right? supermanPropertyUpdated won't be emitted in case the superman properties itself are getting updated.

Eugenio Valeiras Over a year ago

For the updated implementation you do not need updateSupermanProperty I'll add the example

Eugenio Valeiras Over a year ago

I added the new example @ritaj

|

Collectives™ on Stack Overflow

Angular 2+ detect object property change inside service

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related