mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
42289f25c6
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
46 lines
2 KiB
Markdown
46 lines
2 KiB
Markdown
|
|
# How event binding works
|
|
|
|
In an event binding, Angular configures an event handler for the target event.
|
|
You can use event binding with your own custom events.
|
|
|
|
When the component or directive raises the event, the handler executes the template statement.
|
|
The template statement performs an action in response to the event.
|
|
|
|
## Handling events
|
|
|
|
A common way to handle events is to pass the event object, `$event`, to the method handling the event.
|
|
The `$event` object often contains information the method needs, such as a user's name or an image URL.
|
|
|
|
The target event determines the shape of the `$event` object.
|
|
If the target event is a native DOM element event, then `$event` is a [DOM event object](https://developer.mozilla.org/docs/Web/Events), with properties such as `target` and `target.value`.
|
|
|
|
In the following example the code sets the `<input>` `value` property by binding to the `name` property.
|
|
|
|
<code-example header="src/app/app.component.html" path="event-binding/src/app/app.component.html" region="event-binding-3"></code-example>
|
|
|
|
With this example, the following actions occur:
|
|
|
|
1. The code binds to the `input` event of the `<input>` element, which allows the code to listen for changes.
|
|
1. When the user makes changes, the component raises the `input` event.
|
|
1. The binding executes the statement within a context that includes the DOM event object, `$event`.
|
|
1. Angular retrieves the changed text by calling `getValue($event.target)` and updates the `name` property.
|
|
|
|
If the event belongs to a directive or component, `$event` has the shape that the directive or component produces.
|
|
|
|
<div class="alert is-helpful">
|
|
|
|
The type of `$event.target` is only `EventTarget` in the template.
|
|
In the `getValue()` method, the target is cast to an `HTMLInputElement` to allow type-safe access to its `value` property.
|
|
|
|
<code-example path="event-binding/src/app/app.component.ts" region="getValue"></code-example>
|
|
|
|
</div>
|
|
|
|
<!-- links -->
|
|
|
|
<!-- external links -->
|
|
|
|
<!-- end links -->
|
|
|
|
@reviewed 2022-02-28
|