How to listen to barcode scan in background in Angular 9 ,10 Applications

Question

I have a POS Application develop using angular and i want to add search box for user to type and browse the product and regardless of where the focus of cursor when i get a barcode scanner input i want to search from different API other that one i use for type search.

I don't want to display any barcode input. It should be getting and searching automatically.

So far i tried to apply various packages. but cannot find any proper way to approach this matter. can someone please help me to implement this in angular

Answer 1

Use HostListener to listen keypress, and handle your combinedCode by your rule, this example do action when code starts with ESIGN.

@HostListener('document:keypress', ['$event'])
keyEvent(event: KeyboardEvent) {
    if (event.key === 'Enter') {
        console.log(this.combinedCode);
        if (this.combinedCode && this.combinedCode.toLocaleUpperCase().startsWith('ESIGN')) {
            this.displaySignModal = true;
            this.signForm.reset();
            setTimeout(() => {
                window.dispatchEvent(new Event('resize'));
            });
        }
        this.combinedCode = null;
    } else {
        if (this.combinedCode === null) {
            this.combinedCode = event.key;
        } else {
            this.combinedCode = (this.combinedCode || '') + event.key;
        }
    }
}