9. Property Binding

• Definition: Property binding is a one-way data binding mechanism in Angular, used to pass data from the component to the HTML view.
• How it works: It binds a component’s property to an HTML element’s property.
• Syntax: It uses square brackets [] around the element property.

==Using [id] with third bracket is called property binding, while just id (like in HTML) is called an attribute.”==

• <input type="text" value="MSA S" id='enterInput'>:

  • value and id are attributes defined in HTML.
  • value is a constant, initialized when the DOM is loaded.
  • Attributes set initial values for elements and cannot change easily after initialization.

• <input type="text" value="MSA S" [id]='enterInput'>:

  • Uses property binding with Angular (denoted by [ ]).
  • The value inside the brackets refers to a dynamic property, which can change over time.
  • Properties are defined by the DOM and can change during runtime.
  • One-way data binding: the value is passed from component to DOM.

• getAttribute('value'): Retrieves the attribute value (static, set at the beginning).

• $0.value: Retrieves the property value (dynamic, can change over time).

<img [src]="imageUrl">

• One-way Data Flow: The data flows from the component to the view, meaning changes in the component property automatically update the view.
• Usage: Commonly used for binding properties like src, href, disabled, value, etc.

Example:

// app.component.ts
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-image-display',
  templateUrl: './image-display.component.html'
})
export class ImageDisplayComponent {
  imageUrl: string = 'https://example.com/path/to/image.jpg';
}

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

Attribute Binding vs Property Binding in Angular

• Property Binding binds a property of an HTML element to a component’s property. (works with element properties (like src, disabled, value). We can find it uses square brackets [] around the property like [img]).
• Attribute Binding binds an attribute of an HTML element to a component’s property. (Attribute Binding works with HTML attributes (like aria-label, class, etc.).

// app.component.ts
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-binding-example',
  templateUrl: './binding-example.component.html'
})
export class BindingExampleComponent {
  imageUrl: string = 'https://example.com/image.jpg';
  isDisabled: boolean = false;
}

<!-- app.component.html -->
<!-- Property Binding -->
<!-- Binds the 'src' property of the image element to the 'imageUrl' property of the component -->
<img [src]="imageUrl" alt="Image">
 
<!-- Attribute Binding -->
<!-- Binds the 'aria-label' attribute to the 'imageUrl' property -->
<img [attr.aria-label]="imageUrl" alt="Image with aria-label">
  
<!-- Property Binding for 'disabled' -->
<!-- The button will be disabled if 'isDisabled' is true -->
<button [disabled]="isDisabled">Click Me</button>
 
<!-- Attribute Binding for 'class' -->
<!-- Dynamically sets the 'class' attribute based on a condition -->
<button [attr.class]="isDisabled ? 'disabled' : 'enabled'">Click Me</button>