The Document Object Model (DOM) is the browser's live JavaScript representation of an HTML document. Each HTML element becomes an object whose properties represent its current state, allowing application code to engage with document content programmatically. section 3.2.6 section 11.3.1
When the browser parses HTML, it creates an object for each element and initializes its properties from the element's attributes. Changing those objects changes the content displayed by the browser. Angular usually works through its own abstractions rather than directly manipulating the DOM, but this browser behavior remains a foundation of client-side applications. section 3.2.6 section 11.3.1
Use the DOM to reason about:
- Document structure, including the html, head, and body regions and the elements nested within them. section 3.2.6
- Element state, such as an input object's value property, which controls the input's current contents. section 11.3.1
- The difference between an HTML attribute's initial value and the JavaScript property used to manage an element after parsing. section 11.3.1
- Testing rendered component content, where finding elements through the DOM API can require awkward interrogation. section 29.6
Binding a DOM property
An Angular template can bind an input's DOM value property to component data: <input class="form-control" [value]="products()[1].name" />. The expression reads an item from a signal-backed array, and Angular uses the result to set the object representing the input. section 11.3.1
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 example, including a class binding and an input whose value comes from component data. section 11.3.1
