Angular data binding allows communication between templates and components. Angular has a mechanism called data binding that allows you to keep a component’s properties model in sync with the view.
In this tutorial, we’ll learn what is data binding, what are different types of it and will demostrate some example of data binding.
What is Angular data binding
Angular data binding allows us to sync data between the component properties and the view on the template. The data binding helps bring or update data in component typescript code to the view or HTML, and vice versa.
With data binding, we can control every aspect of the user interface of our components by changing variables, hiding variables, showing variable values, can accept user input, and allowing the component to change the value of some variable.
An Angular allows a couple of ways for displaying data on the view. String interpolation and property binding are the data binding types in Angular, used for moving data from the component typescript or model to view in the component template.
Angular data binding types
The data binding is incredibly powerful and easy to use. The data binding can be classified mainly by three types based on the direction of data flow.
- One-way data-binding: From the data, source to view in template
- One-way data-binding: From the view in a template to a data source in a typescript file.
- Two Way Data Binding
What is Angular one way binding ?
Angular one-way data binding allows the binding of the data from the component to the view (DOM) or from the view to the component. One-way data binding is unidirectional. We can classify Angular one-way binding into two types based on the direction of the flow of data.
- One-way data-binding: From the data, source to view in template
- One-way data-binding: From the view in a template to a data source in a typescript file.
The syntax of Angular one-way binding:
// From model typescript to view
{{ expression }}
[Data Binding Target] = "Template Expression"
// From View to model
(target)="statement" The data binding target is something in the DOM (including element properties, component properties, and directive properties) that can be bound to the result of the
expression on the right side of the target. Example we can
<div [style.color]="isAlert ? 'red' : 'green'>One-way data-binding : From the data source to view in template
There are different ways or types of using one-way data-binding from typescript files to view in a template. This one-way data binding can be further classified as below.
- String interpolation
- Attribute Binding
- Property Binding
- Style Binding
- Class Binding
In this type of Angular one-way binding, we used double curly braces or square braces to bind a template attribute with an expression on the right side of an assignment.
String interpolation One-Way Data Binding
Those double curly braces are also known as mustaches or string interpolations. Angular string Interpolation is a special syntax to show data in an HTML view. The double curly braces {{ }} are used for one-way binding a template expression, variable and evaluate the expression between the curly braces as per the component backing it, and then render the result as a string in place in the HTML.
The expression produces a value, and it’s included in the View (the markup from the component template). The Model—that is, the data in the Component class—is never updated.
Example: Expression in string interpolation
{{ 2+4 }} output view in 6 in template|viewCreate a simple angular app – change the value of the app.component.ts file to
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1> {{ name }} </h1>
<p> Length: {{ name.length}} </p>
<p> Reversed: {{getAge()}} </p>
<p>{{ 55 + 45 }} </p>
`,
styles: []
})
export class AppComponent {
name = 'John Smith';
dob = 1997;
getAge(){
return 2018-1997;
}
}In the above example, we have used interpolation to render the name ad dob. This picks up the values of name and dob from getAge() method and then replaces the double-curly expression with its value, thus rendering our UI.
One-Way Data Binding with property binding
This is the Angular syntax for property binding, which binds the value of the expression to the DOM property between the square brackets. With [] we can bind a template expression, making a calculation from available data in the Model and including it in the data binding target.
Property binding allows us to bind a dynamic value to a DOM property. It is easy and we had frequently used it many times. Like enabling or disabling a control, setting a dynamic value for a text field, or setting a dynamic path on an image.
[Data Binding Target] = “Template Expression”
Angular One-Way Data Binding with *
*Data Binding Target = “Template Expression”
The data binding target with * is something in the DOM (including element properties, component properties, and directive properties) that can be bound to the result of the expression on the right side of the target, as shown in.
The property is enclosed in square brackets for data binding. That is all it takes to
apply property binding.
Class Binding (CSS classes)
Angular provides special support in property bindings for assigning the host element to classes and for configuring individual style properties. The class binding allows us to apply a CSS class to an element. Using data binding to apply one or more CSS classes on an element. It provides us to change the CSS class, and hence, change the styles of an element. Example of Angular one-way data binding using the class attribute.
<div [class]="cssClasses">
...
CSS classBinding
</div>
// In Component typescript define cssClass property
cssClasses: string = "addBorder addBackgroundColor"
// In component style we can add styles as
.addBorder {
margin: 10px;
padding: 20px;
width: 200px;
border: 1px solid black;
}
.addBackgroundColor {
background-color: springgreen;
}We can control CSS classes using the method of class binding.
<div [class]="getClasses(1)">
......
</div>We have a complete tutorial only on ngClass and how to use it?
Style binding
In the style binding, we can set a given DOM element with CSS properties from Angular
expressions. The element should receive an object with style names as keys and expressions as values that evaluate style values. If we want to set a single style then we can as below.
<some-element [ngStyle]="{ styleName: 'styleValue'}">
Text of some elememt
</some-element>We can cover complete articles on how to use the Angular ngStyle attribute and if you want to know then check it.
One-way data-binding from view to source
One-way data-binding from view to source we have Angular event binding. Angular event binding allows us to listen for certain events such as clicks, touches, keystrokes, and mouse movements so that we can respond to this event. Event binding syntax consists of a target event name within parentheses on the left and a quoted template statement on the right.
<some-element (event)="statement">
To test the event bindings in action let’s wire the “input” event on the input element and whenever the user types the keyboard the input event is raised and we assign the value of the input to the variable name. We also have added a click event on the button.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<div class="content">
<h4>Angular event input event binding</h4>
<input [value]="name" (input)="name = $event.target.value">
{{name}}<br/><br/>
<button (click)="alertMsg()">Click Event</button>
</div>
`,
styleUrls: ['./app.component.scss']
})
export class AppComponent {
name = '';
alertMsg() {
alert('Edupala click event');
}
}Read our previous articles on Angular two-way data binding in detail. Read more information on data binding in official angular documentation.
Related posts
- Angular two-way data binding – Angular ngModel
- How to implement the Angular ngStyle directive?
- How to implement Angular ngclass with and without conditions.?