The value property is the DOM property that contains an input element’s current contents. Angular property binding can set it from a component expression, such as a product name, while event bindings can read it after user edits. section 11.3.1 section 13.2.1
Use the property in several Angular template patterns:
- Set the input’s displayed contents with [value]="products()[1].name". section 11.3.1
- Read the current contents from a template reference variable with product.value. section 13.2.3
- Update component state from an input event by reading the event target’s value. section 13.2.1 section 13.2.2
Selecting a product through an input
An input can expose its DOM object as #product, display product.value elsewhere, and assign product.value when the pointer moves over a product row. To keep Angular’s bindings updated while the user edits the field, the example adds an input event binding; keyboard-specific bindings can instead update state on every keyup or only when Enter is pressed. section 13.2.3
Listing 11.6. Using the standard property binding in the template.html file in the src/app folder
<div [ngClass]="'text-white p-2 ' + classes()" >
Hello, World.
</div>
<div class="form-group m-2">
<label>Name:</label>
<input class="form-control" [value]="products()[1].name" />
</div>
Inspect the complete property-binding listing, including an input whose value comes from the second product’s name. section 11.3.1
