How does property binding work in Angular

In Angular, property binding is a way to set a property of a view element to a value from a component's data. It allows you to pass data from the component's TypeScript code to the template (HTML) code.

Here’s how property binding works in Angular:

1. Syntax: Property binding uses square brackets ([]) syntax in the template.

<img [src]="imageUrl">

In this example, [src] is the property binding syntax. imageUrl is the component's property that holds the URL to be assigned to the src attribute of the img tag.

2. Binding to DOM Properties: Property binding in Angular is used to bind to DOM element properties, not attributes. For example, [src] binds to the src property of an img element, not the src attribute in the HTML markup.

3. Binding to Custom Properties: Besides binding to standard HTML properties like src, you can also bind to custom properties that are defined in Angular components or directives.

<app-custom-component [customProperty]="valueFromComponent"></app-custom-component>

Here, customProperty is a custom property defined in app-custom-component, and valueFromComponent is a property of the current component that you're binding to it.

4. Expression Context: You can use any valid TypeScript expression in the property binding. This allows you to compute values or manipulate data before assigning it to the property.

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

In this example, isDisabled is a boolean property in the component. If isDisabled is true, the disabled property of the button element will be set to true, disabling the button.

5. One-way Data Flow: Property binding flows data only in one direction: from the component's data to the template. Changes to the component's property value will reflect in the template, but changes in the template (like user input) do not flow back automatically to the component. For that, Angular uses event binding.

6. Handling Undefined or Null Values: Angular handles undefined or null values gracefully in property binding. If the expression results in undefined or null, Angular will set the property to null.

Property binding is essential in Angular for dynamic interaction between the component and its template, enabling rich and responsive UIs by updating DOM properties based on component data changes.