Subscribe to changes on property of component in Angular 2 for debounced auto saving?
<p>Say I have the following Angular 2 component, where <code>foo</code> is an object not bound to a form, and not coming from an <code>Input()</code>:</p>

<pre><code>@Component({
    selector: 'foo',
    templateUrl: '/angular/views/foo.template.html',
    directives: [ContentEditableDirective, ROUTER_DIRECTIVES],
    providers: [FooService]
})
export class FooComponent implements OnInit {
    public foo: Foo = new Foo();

    constructor(
        private fooService: FooService,
        private route : ActivatedRoute,
        private router : Router) {}

    ngOnInit() {
        let id = +this.route.snapshot.params['id'];
        this.fooService.getFoo(id).subscribe(
            foo =&gt; {
                this.foo = foo;

                // I have this.foo, we should watch for changes here.

                Observable. // ???
                    .debounceTime(1000)
                    .subscribe(input =&gt; fooService.autoSave(this.foo));
            },
            error =&gt; console.log(error)
        );
    }
}
</code></pre>

<p>How can I subscribe to changes to the <code>Foo</code> object, and send it up to my server?</p>

<p>Every example I have seen so far involves either having <code>foo</code> come off of an <code>Input()</code>, or being bound to a form. I just want to watch a plain old Javascript object for changes and react to that.</p>

<h2>Update</h2>

<p>I have tried once again, and have been able to debounce an internal <em>primitive</em> property on a component <a href="http://plnkr.co/edit/l47WjeXEOOk9eVMAc8Fj?p=preview" rel="noreferrer">here</a>.</p>

<p><strong>But, I have been unable to make this work with a complex object that has properties of its own (<a href="http://plnkr.co/edit/HMJz6UWeZIBovMkXlR01?p=preview" rel="noreferrer">here</a>)</strong>; as the setter in the provided plnkr is not called by <code>ngModel</code> when it updates the property of the <code>foo</code> object.</p>

<p>A correct answer will demonstrate this working with a complex object.</p>

<h2>Update 2</h2>

<p><a href="http://plnkr.co/edit/Vmrz8PUDRQxLkkbggn6R?p=preview" rel="noreferrer">I believe I have it working with a complex object</a>; but one must ensure the object is immutable and that you have setters for each property, which is kind of a letdown. It also appears to require the splitting of <code>[(ngModel)]</code> into <code>[ngModel]</code> and <code>(ngModelChange)</code> so you can specify custom setter logic.</p>

<p>You could theoretically abstract the functionality to a state service, but I'd like to see if the amount of boilerplate can be stripped down further. Creating new objects each time you would like a state change is kind of frustrating.</p>