title: Angular2 Boolean @Input property getting set as string - binding nested properties
body: <p>I have an outer component with a property: </p>
  
  <pre><code>Loading: Boolean = false;
  </code></pre>
  
  <p>this outer component is setting this property on a nested component: </p>
  
  <pre><code>&lt;etp-loader text="loading..." loading="{{Loading}}"&gt;&lt;/etp-loader&gt;
  </code></pre>
  
  <p>when I do typeof(this.Loading) on the nested component, I get string, which [what i believe] is what throws off the whole logic. </p>
  
  <p>here's my nested component: </p>
  
  <pre><code>import { Component, AfterViewInit, OnInit, Input} from '@angular/core'
  @Component({
      selector: 'etp-loader',
      template: `&lt;div *ngIf="loading" class="progress" style="margin-left: 10%; margin-right: 10%;"&gt;
                  &lt;div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0"
                          aria-valuemax="100" style="width:100%;"&gt;
                          {{text}}
                  &lt;/div&gt;
                  &lt;/div&gt;`
  })
  export class EtpLoaderComponent {
      @Input()
      text: string;
  
      @Input()
      loading: Boolean;    
  
      ngOnInit() {
          console.debug('init: loader state: ', 
                         this.loading, 
                         typeof(this.loading)); // =&gt; init: loader state:  false string
      }
  }
  </code></pre>
  
  <p><em>edit</em> - removed irrelevant bits</p>