Please help with this as I am very new to angular. So in my html, I have this event binding where it would open up a document when a user clicks using the mouse.
<div
fxFlex="1 1 auto"
fxLayout="column"
class="content"
(click)="openDialog($event)">
Besides using (click), how can I also trigger the openDialog event to open using Enter key from the keyboard? Right now it doesn't do anything when I try to use the enter key.
Try (keyup.enter) or (keydown.enter)
<div
fxFlex="1 1 auto"
fxLayout="column"
class="content"
(click)="openDialog($event)"
(keyup.enter)="openDialog($event)"
>
Keep in mind that $event is now the keyboard event and not the click event.
You can use a HostListener decorator on the method in your *.ts file without changing the template.
See this stackblitz for example.
Just be sure in your case, to check that the dialog you want to open was not opened already.
export class App {
enterCounter = 0;
tCounter = 0;
@HostListener('document:keydown.enter')
onDocumentKeydownEnter() {
this.enterCounter++;
}
@HostListener('document:keyup.t')
onDocumentKeyupT() {
this.tCounter++;
}
}
