Data Binding in Angular
A beginner’s introduction into data binding techniques in Angular
Introduction
A common task in frontend deployment is populating the contents of a UI component with variables from a data source. In this scenario, data binding is a useful tool to bind UI components in our layout to data sources within our app. This is especially useful when managing data transfer between components or between component state and the UI.
Angular has several tools in its arsenal that allows us to synchronise data between variables in the component state and the UI template. Here, we’ll delve into the tools that Angular provides us for data binding.
One-way Data Binding
One-way data binding provides a unidirectional connection that binds the variables in the component state to the view (DOM).
Interpolation
String interpolation allows you to embed variables dynamically in the corresponding component template by using the {{ <variable> }} syntax. This can be used to assign text values or property values within html tags. Anything within the curly braces will be resolved and assigned to the corresponding binding target.
Property Binding
This allows you to assign values to the properties of html elements in the template. In this example, link is assigned to the src property of the img element using the square brackets.
Property binding can also be used to communicate between components. E.g. a parent component propagating data to its child components. In the code snippets below, the child component exposes a custom property pizzeriaLocations using the @Input decorator. This decorator signifies that the component can receive a property value from a parent component. Using the property binding syntax [<property name>] = value, the property pizzeriaLocations in the parent component is bound to the variable locations in the child component.
Note: If the argument in @Input is left blank, the property name exposed by the child component will default to the variable name (locations in this example).
Event Binding
Event binding allows you listen and respond to user interactions. This could be mouse clicks or movements, or keystrokes. Parenthesis (<event to listen for>) are used here to bind to a target event. In the Pizzeria component example below, the event binding listens for a mouse click on the button. Whenever the button is clicked, onSubmit will execute.
In Angular, it is also possible to define custom events. Custom events allow a child component to transfer data to a parent component when an event is triggered. This can be useful when user input data is retrieved in one component but is required in a separate component.
To define a custom event, the @Output decorator is used which is assigned to an EventEmitter object. In the Pizzeria component, the custom event reviewSubmitted is exposed to the App component. When EventEmitter.emit(data) is called to emit an event, the parent component will listen for the event and access the data by the $event variable.
Two-way Data Binding
Two-way data binding is a combination of property binding and event binding — it listens for events and updates values to the view simultaneously. Angular uses the syntax [(<property>)] for two-way data binding. We’re using the ngModel directive here to to bind review to the input value.
The two-way binding syntax is actually short hand for a combination of property binding and event binding.
<!-- shorthand syntactic sugar -->
<input type="text" [(ngModel)]="review"><!-- desugared syntax -->
<input type="text" (ngModel)="review=$event" [ngModel]="review'>
And that’s a wrap for data binding!
