What is Property Binding in Angular?
💡 Concept Name
Property Binding – a one-way data binding technique in Angular that binds component data to DOM element properties.
📘 Quick Intro
Property binding allows you to dynamically assign values to HTML element properties from your Angular component using square brackets syntax like [property]. It helps create responsive, interactive UIs.
🧠 Analogy / Short Story
Think of a remote control (component) changing a TV channel (DOM element). You set the channel from the remote — the TV reflects it. Similarly, property binding sets the value from component to DOM.
🔧 Technical Explanation
- 🔗 Uses
[property]syntax to bind component fields to DOM properties. - 🔁 It's one-way: data flows from component to view only.
- 📌 Commonly used for setting image sources, form values, disabled states, etc.
- 📤 More secure and efficient than string interpolation for property values.
🎯 Purpose & Use Case
- ✅ Dynamically set
srcfor images orhreffor links. - ✅ Enable/disable buttons based on conditions.
- ✅ Bind input value or component data to element properties.
- ✅ Style or toggle visibility using Angular expressions.
💻 Real Code Example
// component.ts
export class PropertyBindingComponent {
imageUrl = 'https://example.com/angular-logo.png';
isDisabled = true;
}<!-- template.html -->
<img [src]="imageUrl" alt="Angular Logo" />
<button [disabled]="isDisabled">Click Me</button>
❓ Interview Q&A
Q1: What is property binding in Angular?
A: It’s a way to bind data from the component to DOM element properties using [property] syntax.
Q2: How does property binding differ from interpolation?
A: Property binding binds to actual DOM properties; interpolation binds to text content only.
Q3: Is property binding one-way or two-way?
A: One-way (component ➝ view).
Q4: Can you bind to custom component inputs using property binding?
A: Yes, using the same [input] syntax.
Q5: What happens if the property value is null or undefined in binding?
A: The DOM property becomes empty or invalid depending on its behavior.
📝 MCQs
Q1. Which syntax is used for property binding?
- {property}
- (property)
- [property]
- #property
Q2. What is the direction of data flow in property binding?
- DOM to Component
- Two-way
- Component to DOM
- DOM to Service
Q3. What is a valid use case for property binding?
- Create routes
- Define modules
- Dynamically set an image src
- Write services
Q4. What happens if you use property binding on a disabled button?
- It changes text
- It disables the button based on the value
- It emits an event
- It adds a class only
Q5. Is property binding safer than interpolation in terms of security?
- No
- Yes
- Only for styles
- Only for images
💡 Bonus Insight
Use property binding instead of interpolation when working with non-string attributes like [disabled] or [value]. It ensures proper binding to the DOM API, improving performance and accuracy.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!