⚙️ Property Binding & Two-Way Binding

Angular Templates

? Quick Overview

Property binding in Angular lets you set DOM element properties dynamically using values from your component class. This is a one-way flow: component ➝ template.

Two-way binding creates a live link between component data and template inputs. When the user types into a form field, the component property updates automatically, and any changes from the component are reflected back in the template instantly.

? Key Concepts

Property Binding: Uses square brackets syntax [property] to bind values from the component to DOM properties, e.g. [src], [disabled].
Event Binding: Uses parentheses (event) to listen for DOM events like (click), (input).
Two-Way Binding: Uses the banana-in-a-box syntax [( )] with ngModel, e.g. [(ngModel)]="username", combining property + event binding.
FormsModule: Required module to use ngModel for two-way binding in template-driven forms.

? Syntax & Theory

Property binding (one-way):
[propertyName]="componentProperty"
Example: [src]="imageUrl", [disabled]="buttonDisabled"
Two-way binding (with ngModel):
[(ngModel)]="componentProperty"
Example: [(ngModel)]="username"
Behind the scenes: [(ngModel)]="username" is roughly equal to [ngModel]="username" + (ngModelChange)="username = $event".

? Property Binding Example

? View Code Example (TypeScript Component)

// app.component.ts - Property binding example
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  imageUrl = 'https://angular.io/assets/images/logos/angular/angular.png';
  buttonDisabled = true;
}

? View Code Example (Template)

<!-- app.component.html - Template using property binding -->
<img [src]="imageUrl" alt="Angular Logo" width="150">
<br>
<button [disabled]="buttonDisabled">Click Me</button>

? How Property Binding Works

[src]="imageUrl" reads the imageUrl property from AppComponent and binds it to the src property of the <img> element.
[disabled]="buttonDisabled" binds a boolean from the component to the button’s disabled property. If buttonDisabled is true, the button is disabled; if false, it becomes clickable.
If you update buttonDisabled in the component (e.g. via a method or event), Angular re-renders the view and updates the button state automatically.

? Two-Way Binding Example

? View Code Example (Module Setup)

// app.module.ts - Include FormsModule for ngModel
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

? View Code Example (Component Class)

// app.component.ts - Property backing the input field
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  username = '';
}

? View Code Example (Template with Two-Way Binding)

<!-- app.component.html - Two-way binding with ngModel -->
<input [(ngModel)]="username" placeholder="Enter your name">
<p>Hello, {{ username }}!</p>

? How Two-Way Binding Works

[(ngModel)]="username" sends the current value of username from the component to the input field.
Whenever the user types in the input, ngModel emits an event and updates username in the component.
The paragraph Hello, {{ username }}! displays the latest value of username, updating live as the user types.
This makes two-way binding ideal for simple forms and interactive UIs where the view and data must stay in sync.

✅ Tips & Best Practices

Use property binding [ ] when you only need one-way data flow from component to template (e.g. toggling disabled, setting image URLs, CSS classes, etc.).
Use [(ngModel)] for form fields where you need tight synchronization between what the user types and the component state.
Always import FormsModule in your AppModule (or the relevant feature module) before using ngModel.
Remember that property binding works with actual DOM properties (like disabled, value, checked) and not with plain HTML attributes.
Avoid overusing two-way binding in very complex forms or components; sometimes one-way binding plus explicit event handling leads to clearer, more maintainable code.

? Try It Yourself

Create a component property isVisible = true and use property binding with *ngIf to toggle the visibility of a paragraph: *ngIf="isVisible". Add a button to flip the value.
Bind the value of an input box to a component property using [(ngModel)] and display it live below the input (like a preview).
Build a small two-way bound form with fields like name and email, and show a live summary card that updates as the user types.
Experiment with disabling a button using property binding: create a property isSubmitting and bind it to [disabled] on a submit button.