Course Progress 19%

Angular Property Binding

← Angular Interpolation Angular Event Binding →

Angular में Property Binding का use HTML element की properties को dynamically component data से bind करने के लिए किया जाता है। यह interpolation का advanced version है और forms, images, buttons, inputs और custom components के लिए ज़्यादातर use होता है।

इस chapter में आप सीखेंगे:

  • Property Binding क्या है
  • HTML element properties bind करना
  • Components और custom properties bind करना
  • Best practices

Property Binding क्या है

Property binding में square brackets [ ] use होते हैं। Angular component की value automatically HTML element property में assign कर देता है।

Basic Example

// app.component.ts
import { Component } from '@angular/core';

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

<!-- app.component.html -->
<img [src]="imageUrl" alt="Angular Logo">

Explanation

  • [src] element property को bind करता है
  • Component की imageUrl value image tag के src property में set होती है
  • Value dynamically change हो सकती है

Property Binding with HTML Inputs

Input field value को component property से bind करना:

export class AppComponent {
  userName = 'Alice';
}

<input [value]="userName">
<p>User Name: {{ userName }}</p>

Explanation

  • [value] property bind करता है
  • Component property userName automatically input में show होती है

ध्यान दें: [value] सिर्फ one-way binding है।
Two-way binding के लिए [(ngModel)] use करना चाहिए।

Property Binding for Button Disabled

export class AppComponent {
  isDisabled = true;
}

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

Explanation

  • Button disabled attribute component property isDisabled पर depend करता है
  • Value true/false change होने पर button enable/disable हो जाता है

Property Binding with CSS Class

export class AppComponent {
  isHighlighted = true;
}

<p [class.highlight]="isHighlighted">This is highlighted text</p>

Explanation

  • [class.highlight] Angular syntax है
  • isHighlighted = true होने पर highlight class element पर apply होती है

Property Binding with Style

export class AppComponent {
  fontColor = 'blue';
  fontSize = 20;
}

<p [style.color]="fontColor" [style.font-size.px]="fontSize">
  Styled Text
</p>

Explanation

  • [style.color] और [style.font-size.px] dynamic styling के लिए
  • Angular automatically pixel unit .px attach करता है

Property Binding with Custom Components

Custom component की input properties को bind कर सकते हैं:

// child.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<h3>{{ childTitle }}</h3>`
})
export class ChildComponent {
  @Input() childTitle: string = '';
}

<!-- parent.component.html -->
<app-child [childTitle]="title"></app-child>

Explanation

  • [childTitle] parent component property bind करता है child component के input property @Input() से
  • Dynamic data parent से child में pass हो जाता है

Property Binding vs Interpolation

FeatureInterpolation ({{ }})Property Binding ([ ])
UseMostly text or attributeElement properties and DOM attributes
Example<h1>{{ title }}</h1><img [src]="imageUrl">
Dynamic updatesAutomatically updatesAutomatically updates
Complex propertiesLimitedWorks with objects, arrays, booleans

Best Practices

  • Property binding one-way binding के लिए use करें
  • Element attributes जैसे src, href, disabled के लिए preferred है
  • Complex logic interpolation में avoid करें
  • For forms use [(ngModel)] instead of [value]

Summary

इस chapter में आपने सीखा:

  • Property binding क्या है
  • HTML element properties dynamically bind करना
  • Inputs, buttons, images और styles में property binding use करना
  • Custom components में property binding
  • Difference between interpolation और property binding
← Angular Interpolation Angular Event Binding →
  • Home