Table of Contents
Understanding Data Binding in Angular:
Data binding is a core concept in `Angular` that allows communication between the template (HTML) and the component (TypeScript code). It helps synchronize the data in your application’s user interface with the underlying business logic, ensuring seamless interaction between the two.
Types of Data Binding:
Interpolation (One-way data binding)
Interpolation is used to bind data from the component class to the view template. This method allows you to display the component’s data in the UI.
<h1>{{ title }}</h1>
In this example, the {{ title }} will display the value of the title variable from the component.
Property Binding (One-way data binding)
Property binding binds the value of a component property to an element property in the DOM. This is useful when you need to bind dynamic values to HTML attributes like
src,href,disabled, etc.
<img [src]="imageUrl" alt="Image">
Here, the src attribute is dynamically bound to the imageUrl property from the component.
Event Binding (One-way data binding)
Event binding enables interaction by allowing the view to respond to user actions such as clicks, key presses, or mouse movements.
<button (click)="onClick()">Click Me</button>
When the button is clicked, it triggers the onClick() method in the component.
Two-way Data Binding
Two-way data binding allows for synchronization of data between the view and the component. Angular’s
ngModeldirective is used to achieve two-way binding.
<input [(ngModel)]="name">
<p>Your name is: {{ name }}</p>
In this case, the input field and the name property in the component are synced in both directions—changes in the input field will reflect in the component and vice versa.