title: Boolean inputs to angular 2 component
body: <p>I'm trying to write a component to be reused across my application, which will sometimes show a control button and sometimes not. </p>
  
  <p>Ideally, I'd want to get this from the presence or absence of an attribute, so that using the component would look something like <code>&lt;generic-component hideControls&gt;&lt;/generic-component&gt;</code>, with a boolean variable in my component based on whether that attribute is present, but I can't see a way to do this.</p>
  
  <p><strong>Is there a way to do this?</strong></p>
  
  <p>I have tried with the slightly more messy version below (although ideally I would not need to set a value on showControls/hideControls);</p>
  
  <p>generic.component.html</p>
  
  <pre><code>&lt;div&gt;
    &lt;div&gt;Stuff&lt;/div&gt;
    &lt;div *ngIf="showControls"&gt;Controls&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>generic.component.ts</p>
  
  <pre><code>// imports etc.
  @Component({
    selector: 'generic-selector',
    templateUrl: 'generic.component.html'
  })
  export class GenericComponent implements OnInit {
    @Input()
    public showControls: boolean = true;
  
    // other inputs and logic
  }
  </code></pre>
  
  <p>This fails, because the usage <code>&lt;generic-selector showControls="false"&gt;&lt;/generic-selector&gt;</code> sets showControls as the string "false", which is truthy, rather than as the boolean value. So I have to get round it by adding a lot of mess to the component to take in the input and convert to a boolean based on whether it is being given the string "false" or not. A non-messy way to sort this would be appreciated, but I'd prefer being able to do the other option above.</p>