Data Binding in Angular

Data binding is the synchronization of elements of the component UI widget to the data in your component classes, and vice versa, managed by Angular. It allows communication between template and components class. Data binding can be one way or two-way data binding.

With data binding, we can control the user interface of our components by changing variables, and we can accept user input, allowing them to change the value of some variables. Data binding can control every aspect of the user interface: hiding things, closing things, showing results, accepting user input, and more. It’s incredibly powerful and easy to use.

1. One Way Data binding: This can occur when the template (the View) is automatically kept up-to-date with the latest values in the class instance variables (the Model). Updates flow in only one direction.

One-Way Data Binding wit {{ and }} Those double curly braces are also known as mustaches or interpolation. The double curly braces are used for one-way binding a template expression, making a calculation from available data in the Model and including it in the View. 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

Create 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>
 `,
  styles: []
})
export class AppComponent {
  name = 'John Smith';
  dob = 1997;

getAge(){
    return 2018-1997;
  }
}

One-Way Data Binding with [ and ] or *
The square braces OR * can be used for one-way binding. With [] we can bind a template expression, making a calculation from available data in the Model and including it in the data binding target.
[Data Binding Target] = “Template Expression”
Or:
*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.