Angular 2 Service update UI on change
<p>I im developing an Angular2 application where I have a <code>ConfigurationService</code> and a component, that needs to register on changes on properties of this service.</p>

<pre><code>import {Injectable} from "angular2/src/core/di/decorators";
@Injectable()
export class ConfigurationService {
    private config = {
        showDeveloperOptions: false
    }

    constructor() {}

    get isDeveloper() {
        return this.config.showDeveloperOptions;
    }


    public setDeveloperOptions(developerOptions: boolean) {
        this.config.showDeveloperOptions = developerOptions;
        console.warn("Set DeveloperOptions to " + this.config.showDeveloperOptions);
    }
}
</code></pre>

<p>my view component:</p>

<pre><code>@Component({
    selector: 'developer',
    template: `&lt;div [hidden]="config.isDeveloper"&gt;Not a Developer&lt;/div&gt;`,
    providers: [ConfigurationService],
})

export class DeveloperComponent {
    constructor(public config: ConfigurationService) {
    }
}
</code></pre>

<p>Unfortunately, when I trigger <code>ConfigurationService.setDeveloperOptions(true)</code> from another service where this service got injected, it does not update the view. </p>

<p>What am I doing wrong?</p>

<p>Many thanks!</p>

<p>Seb</p>