How to set default values for Angular 2 component properties?
<p>When writing Angular 2.0 components, how does one set default values for properties?</p>

<p>For example - I want to set <code>foo</code> to <code>'bar'</code> by default, but the binding might immediately resolve to <code>'baz'</code>. How does this play out in the lifecycle hooks?</p>

<pre><code>@Component({  
    selector: 'foo-component'
})
export class FooComponent {
    @Input()
    foo: string = 'bar';

    @Input()
    zalgo: string;

    ngOnChanges(changes){
          console.log(this.foo);
          console.log(changes.foo ? changes.foo.previousValue : undefined);
          console.log(changes.foo ? changes.foo.currentValue : undefined);
    }
}
</code></pre>

<p>Given the following templates, this is what I expect the values would be. Am I wrong?</p>

<pre class="lang-html prettyprint-override"><code>&lt;foo-component [foo] = 'baz'&gt;&lt;/foo-component&gt;
</code></pre>

<p>Logged to console:</p>

<pre class="lang-none prettyprint-override"><code>'baz'
'bar'
'baz'
</code></pre>

<pre class="lang-html prettyprint-override"><code>&lt;foo-component [zalgo] = 'released'&gt;&lt;/foo-component&gt;
</code></pre>

<p>Logged to console: </p>

<pre class="lang-none prettyprint-override"><code>'bar'
undefined
undefined
</code></pre>