Angular Routes - Can a Tab Keypress Initiate a Route?

Question

I'm new to Angular (v5) and working with routes into Express (/api/my_route.js), in order to see if a input item value entered exists within my MongoDB collection.

The thing I'm not sure about and checked for a solution is that, I'm attempting to call this route to check the value in mongo when the user presses the tab key. When tab is pressed, it calls a function which in turn, was hoping would call my route.

Can you please let me know if a route can be called from a tab key press or should I be doing this another way as I'm still trying to get to grips with Angular?

From what I can see in my Express log, none of my console.log messages are appearing.

Thanks.

Answer 1

You can always bind the tab keydown event , listen for it, and then use angular router to navigate to whichever route you want.

<input (keydown.tab)="..."> //use the tab keydown event

In your controller

this.router.navigateByUrl(<ur route url>);

Answer 2

You can easily use keydown event in angular 6, angular 7, angular 8 and angular 9 application.

When user will key up on input box field then trigger onKeyDownEvent() of angular component. You can use (keydown.tab) attribute for call function. Bellow logic code:

.html

<input type="search" (keydown.tab)="onKeyDownEvent($event)" />

.ts

@Component({
  selector: 'my-app',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css']

})
export class MyComponent {

  
  constructor(private router: Router,
              private route: ActivatedRoute) { }

  onKeyDownEvent(event: any) {
    this.router.navigate(['search-result'], { relativeTo: this.route });
    ...logic

  }
}

Be aware that we need to navigate to other route programmatically, in the .ts file, NOT in html file with the routerLink="/search-result" . We need to inject Router and ActivatedRoute classes as to navigate from current route to the /search-result route.