What is Property Binding in Angular?

What is Property Binding?

Property binding is a type of one-way data binding in Angular used to bind a value from the component (TypeScript) to a property of an HTML element, directive, or child component.

It uses square brackets:

[property]="expression"

The data flows in one direction:

Component (TypeScript)
        ↓
Element / Directive / Component Property

Example:

isDisabled = true;

<button [disabled]="isDisabled">Save</button>

Here, Angular takes the value of isDisabled from the component and assigns it to the button's disabled property.

Why Do We Need Property Binding?

In real applications, HTML element properties frequently need to change based on application data.

For example:

• Disable a button based on a condition.
• Set an image URL dynamically.
• Set a link dynamically.
• Control checkbox state.
• Pass data to a child component.
• Set directive properties dynamically.

Instead of hard-coding:

<button disabled>Save</button>

we can make it dynamic:

<button [disabled]="isDisabled">Save</button>

Now the component controls whether the button is enabled or disabled.

Purpose

The main purpose of property binding is to dynamically set properties using component data.

For example:

Set image source

<img [src]="imageUrl">

Disable a button

<button [disabled]="isDisabled">Save</button>

Set a link

<a [href]="websiteUrl">Visit Website</a>

Set checkbox state

<input type="checkbox" [checked]="isSelected">

Pass data to a child component

<app-user [user]="selectedUser"></app-user>

Simple Example

TypeScript

import { Component } from '@angular/core';

@Component({
  selector: 'app-product',
  standalone: true,
  templateUrl: './product.html'
})
export class Product {
  productName = 'Laptop';
  imageUrl = 'assets/laptop.jpg';
  isDisabled = true;
}

HTML

<h2>{{ productName }}</h2>

<img [src]="imageUrl">

<button [disabled]="isDisabled">
  Buy Now
</button>

In this example:

imageUrl
   ↓
[src]

isDisabled
   ↓
[disabled]

The values come from the component and are assigned to element properties.

How Property Binding Works

Consider:

isDisabled = true;

Template:

<button [disabled]="isDisabled">
  Save
</button>

Angular evaluates:

Component
    │
    │ isDisabled = true
    ↓
Property Binding
    │
    │ [disabled]="isDisabled"
    ↓
Button's disabled property
    │
    ↓
Button becomes disabled

If the component later changes:

isDisabled = false;

Angular updates the property, and the button becomes enabled.

Therefore:

Property Binding = Component → View one-way binding

Property Binding with Expressions

Property binding can also use expressions.

age = 20;

<button [disabled]="age < 18">
  Register
</button>

If:

age = 20

then:

age < 18 → false

The button remains enabled.

Property Binding with Child Components

Property binding is not limited to native HTML elements. It is also very important for parent-to-child communication.

Suppose a child component has an input:

import { Component, input } from '@angular/core';

@Component({
  selector: 'app-user',
  standalone: true,
  template: `<h2>{{ name() }}</h2>`
})
export class User {
  name = input<string>();
}

The parent can pass data using property binding:

<app-user [name]="userName"></app-user>

The flow is:

Parent Component
      ↓
   userName
      ↓
 [name]="userName"
      ↓
Child Component

Property Binding vs Interpolation

Both are one-way bindings from Component → View, but their typical purposes differ.

Example:

<h2>{{ userName }}</h2>

<button [disabled]="isDisabled">
  Save
</button>

A particularly important difference is value type. Property binding can directly pass values such as booleans, objects, arrays, and numbers:

<app-user [user]="userObject"></app-user>

<button [disabled]="isDisabled"></button>

Property Binding vs Attribute

This is an important interview point.

Consider:

<button [disabled]="isDisabled">

Angular is normally binding to the DOM property disabled, not directly manipulating the original HTML attribute.

HTML Attribute
     ↓
Initial configuration

DOM Property
     ↓
Current runtime state

When you explicitly need attribute binding, Angular provides:

[attr.aria-label]="buttonLabel"

So:

[property]="value"

and:

[attr.attributeName]="value"

are not the same thing.

Advantages

1. Dynamic UI

Properties can change automatically based on component state.

<button [disabled]="isLoading">

2. Supports Different Data Types

Property binding can bind:

• String
• Number
• Boolean
• Object
• Array

3. Reduces Manual DOM Manipulation

You usually don't need code such as:

document.getElementById(...)

Angular manages the property update.

4. Useful for Parent-to-Child Communication

<app-product [product]="selectedProduct">

5. Clean and Readable

The relationship between component data and the element property is visible directly in the template.

Disadvantages

1. One-Way Only

Property binding sends data:

Component → View

It does not by itself send changed values from the view back to the component.

2. Complex Expressions Reduce Readability

Avoid complicated expressions such as:

<button [disabled]="user && user.role === 'Admin' && !user.active && somethingElse">

Move complex logic to the component when appropriate.

3. Property and Attribute Confusion

Beginners often confuse:

[disabled]

with:

[attr.disabled]

They have different semantics.

Key Points

• Property binding is one-way data binding.
• Direction is Component → View.
• It uses square brackets [ ].
• Syntax:

[property]="expression"

• It can bind to HTML element properties.
• It can bind to directive properties.
• It can bind to child component inputs.
• It supports booleans, numbers, objects, arrays, and strings.
• Property binding is different from attribute binding.
• It is commonly used for dynamic element behavior.

Easy way to remember

[ ] = Property Binding

For example:

[src]="imageUrl"
[disabled]="isDisabled"
[checked]="isChecked"
[href]="websiteUrl"

Interview Questions and Answers

Q1. What is property binding in Angular?

Answer:
Property binding is a one-way data binding technique used to bind component data to an HTML element, directive, or child component property.

<button [disabled]="isDisabled">Save</button>

Q2. What is the syntax of property binding?

Answer:

[property]="expression"

Example:

<img [src]="imageUrl">

Q3. What is the direction of property binding?

Answer:

Component → View

It is one-way binding.

Q4. Can property binding bind boolean values?

Answer:
Yes. This is one of its common uses.

isDisabled = true;

<button [disabled]="isDisabled">
  Save
</button>

Q5. Can property binding pass objects?

Answer:
Yes. Property binding can pass objects, arrays, numbers, booleans, and other values.

<app-user [user]="userObject"></app-user>

This is commonly used for parent-to-child communication.

Q6. What is the difference between interpolation and property binding?

Answer:
Interpolation is commonly used for displaying values:

<h2>{{ userName }}</h2>

Property binding is used to set properties:

<button [disabled]="isDisabled">Save</button>

Both are generally:

Component → View

Q7. What is the difference between property binding and event binding?

Answer:

Property Binding
Component → View
[property]="value"

Event Binding
View → Component
(event)="method()"

Example:

<button
  [disabled]="isDisabled"
  (click)="save()">
  Save
</button>

Here [disabled] is property binding, while (click) is event binding.