title: Scanning barcode using Angular2
body: <p>I would like develop an application in asp.net 5 / Angular2 and I have a problem with scanning barcodes.</p>
  
  <p>I have my component using typeScript :</p>
  
  <pre><code>@Component({
      selector: 'barcode-scanner',
      templateUrl: 'app/scan.html',
      directives: [ROUTER_DIRECTIVES]
  })
  export class ScanComponent implements OnInit {
      barcode: string;
  
      constructor() {}
      ngOnInit() { }
  
      onKey(event: any) {
          this.barcode = event.target.value;
      }
  }
  </code></pre>
  
  <p>and my html template (scan.html): </p>
  
  <pre><code>&lt;barcode-scanner&gt;
      &lt;div class="container"&gt;
          &lt;header&gt;&lt;h1&gt;My App title&lt;/h1&gt;&lt;/header&gt;
          &lt;div class="row"&gt;
              &lt;input type="text" (keyup)="onKey($event)" autofocus /&gt;
              &lt;p&gt;barcode: {{ barcode }}&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/barcode-scanner&gt;
  </code></pre>
  
  <p>It's working, but only when the input is displayed on the screen, and focused.
  Is there a way to do that with a hidden input ? (I've tried a <code>input type="hidden"</code>, and also an <code>input type="text"</code> with a <code>display:none</code> style's attribute but in the both case It didn't works.</p>
  
  <p>Also, is it possible to catch the <code>keypress</code> event on the document ? and not on a specified input ?</p>