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

CodePudding user response：

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