Understanding Two-Way Binding in Angular 17

Angular, a powerful front-end framework, introduces a feature that seamlessly connects the Model (data) and the View (UI) — Two-Way Binding. This functionality ensures that changes in the View automatically propagate to the Model, and vice versa. Let’s delve into the intricacies of Two-Way Binding, exploring its syntax, applications, and how it combines both property and event binding.

Two way binding

Two way binding is a feature in Angular that synchronizes the Model(data) and the View(UI). This means the changes in the View automatically updates the Model, and the changes in the View are reflected back to the Model.

Use two way binding to listen for events and update values simultaneously between the child and parent components

Syntax: It is denoted by the [(ngModel)] (banana in the box syntax) directive.

<!-- Two-way data binding example -->
<input [(ngModel)]="username">

The [(ngModel)] directive is a shorthand for binding the value property of the element to the username property of the component and listening for input events to update the username property.

Two way binding combines both property and event binding

You can achieve two-way binding by using separate property binding and event binding. For example, with an input field:

<input [value]="username" (input)="username = $event.target.value">

This binds the value property of the input to the username property of the component, and the (input) event is used to update the username property when the input changes.

Property binding

Helps you set values for properties of HTML elements and directives

<!-- Property binding example -->
<img [src]="imageUrl" alt="Image">
<button [disabled]="isButtonDisabled">Click me</button>

One Way Binding(interpolation)

Interpolation is way to bind dynamic values directly into the text content of HTML elements.

<h1>{{ pageTitle }}</h1>

Event binding

Allows you to respond to user events (such as clicks, keypresses, etc.) by triggering methods in the component.

<!-- Event binding example -->
<button (click)="onClick()">Click me</button>
<input (input)="onInputChange($event)">

The $event is a special variable that holds information about the event, such as the value of the input at the time of the event.

Incase you did not know

· In HTML, an attribute is a value that is added to an HTML tag to provide additional information about the element. A property, on the other hand, is a value that is set on a JavaScript object to provide additional information about the object

· Directives are markers on the DOM element that tell Angular to do something to a DOM element or its children