title: Angular 2: Difference between property binding with and without brackets?
body: <p>I noticed it's possible to property bind stuff without brackets. What is the difference?</p>
  
  <p>Typescript:</p>
  
  <pre><code>import { Component, Input } from '@angular/core';
  
  @Component( {
      selector: 'my-comp',
      templateUrl: `
      input is {{foo}}
    `
  
  })
  export class myComponent {
      @Input() public foo: string;
  
      constructor() { }
      }
  </code></pre>
  
  <p>HTML:</p>
  
  <p><strong>Case 1</strong></p>
  
  <pre><code>&lt;my-comp [foo]="bar"&gt;&lt;/my-comp&gt;
  </code></pre>
  
  <p><strong>Case 2</strong></p>
  
  <pre><code>&lt;my-comp foo="bar"&gt;&lt;/my-comp&gt;
  </code></pre>