Scanning barcode using Angular2

Question

I would like develop an application in asp.net 5 / Angular2 and I have a problem with scanning barcodes.

I have my component using typeScript :

@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;
    }
}

and my html template (scan.html):

<barcode-scanner>
    <div class="container">
        <header><h1>My App title</h1></header>
        <div class="row">
            <input type="text" (keyup)="onKey($event)" autofocus />
            <p>barcode: {{ barcode }}</p>
        </div>
    </div>
</barcode-scanner>

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 input type="hidden", and also an input type="text" with a display:none style's attribute but in the both case It didn't works.

Also, is it possible to catch the keypress event on the document ? and not on a specified input ?

Answer 1

You can listen to global events by adding the event target as prefix target:event. target can be window, document or body

(window:keypress)="doSomething($event)"