Search code examples
angularkeypress

How do I use delete button and up and down button from keyboard in an angular app

I am trying to build a todo app The app has a list of tasks to be done these tasks can be deleted as well The app works fine with mouse clicks how do i make the app respond to keypresses

I want the app to go down the list when arrowdown is pressed and go up when arrow up is pressed

focus on the element as keys are pressed

once it is focused i must be able to press enter to mark task as done and press delete to delte task

app.html

<input type="text" class="todo-input" placeholder="What needs to be done" [(ngModel)]="todoTitle" (keyup.enter)="addTodo()">
<todo-item *ngFor="let todo of todoService.todosFiltered()" [todo]="todo">
 </todo-item>

todo-item.html

<div class="todo-item">
<div class="todo-item-left">
<input type="checkbox" [(ngModel)]="todo.completed">
<div  class="todo-item-label" [ngClass]="{ 'completed' : todo.completed }"{{ todo.title }}</div>

</div>
<div class="remove-item" (click)="todoService.deleteTodo(todo.id)" >
&times;
</div>
</div>
Solution

  • You can use @HostListeners to listen to keyboard events and utilize it as per your need.

    @HostListener('window:keydown.arrowup', ['$event'])
@HostListener('window:keydown.arrowdown', ['$event'])

    You can refer the below project which uses arrow keys for navigation through the todo list, https://stackblitz.com/edit/angular-ivy-2ejnaz

    You can also read more about Angular HostListners at, https://angular.io/api/core/HostListener