Multiple binding styles (including two-way)
Angular templates connect your view to component state through four core patterns. Each pattern
is explicit, composable and type-checked, so UIs stay in sync with minimal boilerplate. (angular.dev)
1) Interpolation - render values into text
Use {{ ... }} to project values (and side-effect-free expressions) into the DOM’s text nodes.
It’s one-way: data flows from component to view. (angular.io)
2) Property binding - set element/Directive/Component inputs
Square brackets bind properties, not attributes. This updates when the bound value changes.
Use special forms for attributes/classes/styles when needed. (angular.dev)
3) Event binding - react to user and DOM events
Parentheses listen to events and pass an $event payload. You can combine with key aliases such as
keyup.enter. Use events to update component state. (angular.dev)
4) Two-way binding - “banana in a box”
Two-way binding synchronises a value both ways. There are two common, accurate patterns:
a) Forms with NgModel - ideal for template-driven forms.
Requires importing FormsModule in a standalone component. (angular.dev)
b) Custom component two-way - expose an @Input() and a matching @Output() named
<name>Change. Consumers can then write [(name)]="..."
to keep parent and child in sync. (angular.dev)
Notes on accuracy & modern Angular
- Interpolation is one-way text projection; no DOM writes or side effects in expressions. (angular.io)
- Property vs attribute: property binding updates live DOM properties; attribute binding targets raw
attributes for cases without a matching property (e.g., many ARIA attributes). (angular.dev) - Event binding uses the browser’s event model;
$event carries the payload. Key aliases like
keyup.enter are supported. (angular.dev) - Two-way:
[(ngModel)] is available via FormsModule; custom components use the
[prop] + (propChange) convention, enabling [(prop)]. (angular.dev)
Version context: as of Angular v20 (current stable at the time of writing), these bindings and
patterns are the recommended, supported approaches. (angular.dev)