What’s a clean way to manage state in Angular and have components update?

I’m using a service to manage state in Angular:

import { Injectable } from '@angular/core'; import { Subject } from 'rxjs';  @Injectable() export class DrawingAreaService {   itemChange: Subject<string> = new Subject();    private foo = 'foo';    get bar() {     return this.foo;   }    set bar(value) {     this.foo = value;     this.itemChange.next(value);   } } 

And in my component I have

get bar() {   return this.service.bar; }  ngOnInit() {   this.service.bar = 'test value'; } 

html:

{{ this.bar }} 

Calling the service and updating bar value on init does not trigger the component changes. If instead I also set to a field on the component, something like:

this.service.bar = 'test value'; this.bar = 'test value'; 

it triggers the change detection.

I’m wondering what’s the best way to handle state changes like this, should I set on the service only and then call detectChanges()? Should I subscribe and set a class field from the subscription? Should I set twice?

Is there any other way to do this? How can I do it in a really simple way?