title: How to set default values for Angular 2 component properties?
body: <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>