What is data binding in Angular 8?

by

Data Binding is one of the key concepts of Angular 8. It is the most eminent technique which is used to link your data to the view layer. It is used to make a communication between the DOM and the TypeScript code of your component. In simple words, you can say that data binding is a communication between the typescript code of your component and your template, which the user sees. It makes it easy to define interactive applications without worrying about pushing and pulling data.

There are two types of data binding i.e., one-way data binding, two-way data binding.

In Angular 8, as well as in other versions of Angular, data binding is a fundamental feature that allows you to synchronize the data between the component and the template. There are four types of data binding in Angular:

  1. Interpolation ({{ }}): It allows you to bind a component property to an element in the view. The data flows from the component to the view. For example:
    html
    <p>{{ message }}</p>

    In the corresponding component:

    typescriptmessage = “Hello, Angular!”;
  2. Property Binding ([property]="expression"): It binds a property of an HTML element to a property of a component. This allows you to set the initial value of an element’s property based on a component’s property. For example:
    html
    <img [src]=”imageUrl” alt=”Angular Logo”>

    In the corresponding component:

    typescript
    imageUrl = “path/to/angular-logo.png”;
    Event Binding ((event)="handler()"):     It binds an event from the view to a method in the component. When the specified event occurs, the associated method in the component is executed. For example:
  3. html
    imageUrl = “path/to/angular-logo.png”;

    In the corresponding component:

    typescript
    onClick() {
    console.log(“Button clicked!”);
    }
  4. Two-way Binding ([(ngModel)]): It combines property binding and event binding, allowing for two-way communication between the component and the view. It is commonly used with forms for bidirectional data flow. To use two-way binding, you need to import the FormsModule from @angular/forms in your module. For example:
    html
    <input [(ngModel)]=”username” />

    In the corresponding component:

    typescript
    username = “JohnDoe”;

These data binding mechanisms simplify the development of dynamic and interactive Angular applications by automating the flow of data between the component and the view