Skip to content

Commit 060e86e

Browse files
JeanMecheAndrewKushnir
authored andcommitted
docs: fix event listener key modifier example (angular#60280)
PR Close angular#60280
1 parent 4f4bfa3 commit 060e86e

File tree

1 file changed

+5
-5
lines changed

1 file changed

+5
-5
lines changed

adev/src/content/guide/templates/event-listeners.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@ When you want to add event listeners to an HTML element, you wrap the event with
1313
`,
1414
...
1515
})
16-
export class AppComponent({
16+
export class AppComponent{
1717
updateField(): void {
1818
console.log('Field is updated!');
1919
}
20-
})
20+
}
2121
```
2222

2323
In this example, Angular calls `updateField` every time the `<input>` element emits a `keyup` event.
@@ -71,11 +71,11 @@ However, since this is a common scenario, Angular lets you filter the events by
7171
`,
7272
...
7373
})
74-
export class AppComponent({
74+
export class AppComponent{
7575
updateField(event: KeyboardEvent): void {
7676
console.log('The user pressed enter in the text field.');
7777
}
78-
})
78+
}
7979
```
8080

8181
You can also add additional key modifiers:
@@ -93,7 +93,7 @@ Angular also allows you to specify [Code values for keyboard events](https://dev
9393

9494
```angular-html
9595
<!-- Matches alt and left shift -->
96-
<input type="text" (keydown.code.alt.leftshift)="updateField($event)" />
96+
<input type="text" (keydown.code.alt.shiftleft)="updateField($event)" />
9797
```
9898

9999
This can be useful for handling keyboard events consistently across different operating systems. For example, when using the Alt key on MacOS devices, the `key` property reports the key based on the character already modified by the Alt key. This means that a combination like Alt + S reports a `key` value of `'ß'`. The `code` property, however, corresponds to the physical or virtual button pressed rather than the character produced.

0 commit comments

Comments
 (0)