Two-way binding
Two-way binding is a data-binding relationship in which changes to either of two corresponding values automatically update the other.
Pro Angular 16
Two-way data binding is a technique that synchronizes changes between application data and its user-interface representation in both directions.
- How it is used
- Synchronizes form controls with component data so user edits update application state and application changes update the controls.
- How deep it goes
- Works through paired bindings, ngModel setup, a form, and a custom directive; limits the custom implementation to input elements.
- Examples
- Uses task checkboxes, synchronized product-name inputs, a product-entry form, and a custom input directive.
- What you can do after
- Build it from scratch with paired bindings or a custom directive, and apply it via ngModel to form controls.
Build a Frontend Web Framework (From Scratch)
A synchronization technique in which changes to application state are reflected in the user interface and changes to the interface are reflected back in the state.
- How it is used
- Synchronizes form controls with application state in a component-based TODO interface.
- How deep it goes
- Defines the state-DOM flow and implements it with a value attribute, input listener, dispatched event, and reducer.
- Examples
- Uses a currentTodo text input and an editable TODO item to demonstrate state updates from typed values.
- What you can do after
- Build it from scratch by binding an input value to state and dispatching input events that update the state.
Read how Build a Frontend Web Framework (From Scratch) explains two-way binding →
Related concepts
- ngModelimplemented by · ngModel is an Angular directive that synchronizes a form control's value with an application model through two-way binding.
- unidirectional data pipelinecontrasts with · A unidirectional data pipeline is a data-flow model in which data or updates move from source to destination in one direction without automatic reverse propagation.
- model functionused by · The Angular model function creates a signal that functions as both a component input and output for two-way binding.
- input value attributeuses · The HTML value attribute specifies the initial value associated with a form control or option.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.