docs(core): Add docs for keyboard event binding (#47022)

This adds new documentation on how to bind to keyboard events for key and code fields, and why you might use one over the other.

PR Close #47022

aio/content/guide/event-binding.md

@@ -61,6 +61,26 @@ Angular also supports passive event listeners. For example, use the following st
 
 After those steps, if you add event listeners for the `scroll` event, the listeners will be `passive`.
 
+## Binding to keyboard events
+
+You can bind to keyboard events using Angular's binding syntax. You can specify the key or code that you would like to bind to keyboard events. They `key` and `code` fields are a native part of the browser keyboard event object. By default, event binding assumes you want to use the `key` field on the keyboard event. You can also use the `code` field.
+
+Combinations of keys can be separated by a `.` (period). For example, `keydown.enter` will allow you to bind events to the `enter` key. You can also use modifier keys, such as `shift`, `alt`, `control`, and the `command` keys from Mac. The following example shows how to bind a keyboard event to `keydown.shift.t`.
+
+   ```typescript
+   <input (keydown.shift.t)="onKeydown($event)" />
+   ```
+
+Depending on the operating system, some key combinations might create special characters instead of the key combination that you expect. MacOS, for example, creates special characters when you use the option and shift keys together. If you bind to `keydown.shift.alt.t`, on MacOS, that combination produces a `ˇ` character instead of a `t`, which doesn't match the binding and won't trigger your event handler. To bind to `keydown.shift.alt.t` on MacOS, use the `code` keyboard event field to get the correct behavior, such as `keydown.code.shiftleft.altleft.keyt` shown in this example.
+
+   ```typescript
+   <input (keydown.code.shiftleft.altleft.keyt)="onKeydown($event)" />
+   ```
+
+The `code` field is more specific than the `key` field. The `key` field always reports `shift`, whereas the `code` field will specify `leftshift` or `rightshift`. When using the `code` field, you might need to add separate bindings to catch all the behaviors you want. Using the `code` field avoids the need to handle OS specific behaviors such as the `shift + option` behavior on MacOS.
+
+For more information, visit the full reference for [key](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values) and [code](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_code_values) to help build out your event strings.
+
 ## What's next
 
 * For more information on how event binding works, see [How event binding works](guide/event-binding-concepts).