Data Binding and Directives.md

Data Binding and Directives in Angular

Angular's data binding and directives are key concepts that help developers build dynamic and interactive web applications efficiently. Data binding in Angular synchronizes data between the model and view components, while directives provide instructions to transform the DOM based on your application data.

Table of Contents

• Property Binding
• Event Binding
• Structural Directives
• Attribute Directives

---

Property Binding

Property binding in Angular helps you set values for properties of HTML elements or directives. You bind data from your component to a property of an element.

Example of Property Binding

<img [src]="user.imageUrl">

Here, the image source (src) is bound to the imageUrl property on the user object in your component.

Event Binding

Event binding allows you to listen to and respond to user actions such as keystrokes, mouse movements, clicks, and touches.

Example of Event Binding

<button (click)="save()">Save</button>

In this example, the click event is bound to the save method in your component. When the button is clicked, the save method will execute.

Structural Directives

Structural directives are responsible for HTML layout manipulations. They shape or reshape the DOM's structure, typically by adding, removing, or manipulating elements.

Common Structural Directives

• *ngIf: Conditionally includes a template block based on the truthiness of the expression.

  <div *ngIf="isLoggedIn">
    Welcome back, user!
  </div>

• *ngFor: Repeats a template for each item in an array.

  <ul>
    <li *ngFor="let item of items">{{ item }}</li>
  </ul>

Attribute Directives

Attribute directives change the appearance or behavior of an element, component, or another directive. Unlike structural directives, they do not change the structure of the DOM, but they modify attributes and properties of elements.

Example of an Attribute Directive

<p [style.color]="isSpecial ? 'red' : 'green'">
  This text changes color based on the 'isSpecial' property.
</p>

In this example, the style.color attribute is dynamically set based on the value of the isSpecial property. If isSpecial is true, the text will be red; otherwise, it will be green.

Creating a Custom Attribute Directive

You can also create your own custom attribute directives. Here’s how to create a simple highlight directive:

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) {}

  @Input() set appHighlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

Use it in your template:

<p [appHighlight]="'yellow'">This paragraph will be highlighted in yellow.</p>

---

Data binding and directives are powerful tools in Angular that provide a rich interactive experience by dynamically controlling data and DOM behavior. Understanding these concepts is fundamental to building responsive and intuitive Angular applications.