🎯 Angular Data Binding – Master the Core of Dynamic Web Apps!

Binding data between the UI and the component is what makes Angular powerful. Here are the main types of Data Binding in Angular 20 👇

✅ String Interpolation

📁 1. app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // Component properties
  title: string = 'Angular Data Binding Demo';
  userName: string = 'John Doe';
  userAge: number = 25;

  // A method to demonstrate interpolation with functions
  getWelcomeMessage(): string {
    return `Hello, ${this.userName}! Welcome to Angular.`;
  }
}

---

📁 2. app.component.html

<!-- Title using String Interpolation -->
<h1>{{ title }}</h1>

<!-- Displaying simple values -->
<p>Name: {{ userName }}</p>
<p>Age: {{ userAge }}</p>

<!-- Using method inside interpolation -->
<p>{{ getWelcomeMessage() }}</p>

<!-- Expression evaluation inside interpolation -->
<p>Next Year, Age will be: {{ userAge + 1 }}</p>

<!-- Conditional interpolation -->
<p>Status: {{ userAge > 18 ? 'Adult' : 'Minor' }}</p>

✅ Property Binding

Property Binding is used to bind values from the TypeScript component to the HTML element’s properties using [ ].

📁 property-binding.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-property-binding',
  templateUrl: './property-binding.component.html'
})
export class PropertyBindingComponent {
  // Component properties for binding
  imageUrl: string = 'https://via.placeholder.com/300x150';
  buttonDisabled: boolean = true;
  inputPlaceholder: string = 'Enter your name here';
  progressValue: number = 70;
}

---

📁 property-binding.component.html

<h2>Property Binding in Angular</h2>

<!-- Binding image source property -->
<img [src]="imageUrl" alt="Sample Image">

<!-- Binding to button disabled property -->
<button [disabled]="buttonDisabled">Submit</button>

<!-- Binding placeholder property of input -->
<input [placeholder]="inputPlaceholder">

<!-- Binding value to progress bar -->
<progress [value]="progressValue" max="100"></progress>
<p>Progress: {{ progressValue }}%</p>

✅ Attribute Binding

Attribute Binding is used when you need to bind to HTML attributes (not DOM properties), such as colspan, aria-label, role, etc.

📁 attribute-binding.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-attribute-binding',
  templateUrl: './attribute-binding.component.html'
})
export class AttributeBindingComponent {
  columnSpan: number = 2;
  ariaLabelText: string = 'Close Button';
  tableRole: string = 'presentation';
}

---

📁 attribute-binding.component.html

<h2>Attribute Binding in Angular</h2>

<!-- Binding colspan attribute dynamically -->
<table border="1">
  <tr>
    <td [attr.colspan]="columnSpan">This cell spans {{ columnSpan }} columns</td>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

<br>

<!-- Binding aria-label for better accessibility -->
<button [attr.aria-label]="ariaLabelText">X</button>

<br><br>

<!-- Binding role attribute -->
<div [attr.role]="tableRole">
  This div has role="{{ tableRole }}"
</div>

✅ Class Binding

Class binding allows you to dynamically add or remove CSS classes based on component logic.

📁 class-binding.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-class-binding',
  templateUrl: './class-binding.component.html'
})
export class ClassBindingComponent {
  isActive: boolean = true;
  hasError: boolean = false;

  // Example of multiple class conditions
  messageClasses = {
    'text-success': !this.hasError,
    'text-danger': this.hasError,
    'text-bold': this.isActive
  };

  toggleClasses() {
    this.isActive = !this.isActive;
    this.hasError = !this.hasError;

    // Update class object
    this.messageClasses = {
      'text-success': !this.hasError,
      'text-danger': this.hasError,
      'text-bold': this.isActive
    };
  }
}

---

📁 class-binding.component.html

<h2>Class Binding in Angular</h2>

<!-- Single class binding -->
<p [class.active]="isActive">This text is active if 'isActive' is true.</p>

<!-- Conditional error message -->
<p [class.error]="hasError">This text turns red if 'hasError' is true.</p>

<!-- Multiple dynamically bound classes -->
<p [ngClass]="messageClasses">
  This text applies multiple classes based on conditions.
</p>

<!-- Button to toggle class states -->
<button (click)="toggleClasses()">Toggle Classes</button>

✅ Style Binding

Style binding allows you to dynamically set inline CSS styles on HTML elements using component data.

📁 style-binding.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-style-binding',
  templateUrl: './style-binding.component.html'
})
export class StyleBindingComponent {
  textColor: string = 'blue';
  fontSize: string = '20px';
  isHighlighted: boolean = true;

  // Example of multiple styles using ngStyle
  textStyles = {
    'color': this.textColor,
    'font-size': this.fontSize,
    'background-color': this.isHighlighted ? 'lightyellow' : 'transparent'
  };

  toggleHighlight() {
    this.isHighlighted = !this.isHighlighted;
    this.textStyles['background-color'] = this.isHighlighted ? 'lightyellow' : 'transparent';
  }
}

---

📁 style-binding.component.html

<h2>Style Binding in Angular</h2>

<!-- Single style binding -->
<p [style.color]="textColor">
  This text uses dynamic color = "{{ textColor }}"
</p>

<!-- Multiple inline styles using ngStyle -->
<p [ngStyle]="textStyles">
  This text has multiple dynamically bound styles.
</p>

<!-- Button to toggle background color -->
<button (click)="toggleHighlight()">Toggle Highlight</button>

✅ Event Binding

Event Binding allows you to handle user interactions such as clicks, keypress, input, mouseover, etc., by connecting HTML events to TypeScript methods.

📁 event-binding.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-event-binding',
  templateUrl: './event-binding.component.html'
})
export class EventBindingComponent {
  clickCount: number = 0;
  userInput: string = '';
  message: string = 'Click the button or type something!';

  onButtonClick() {
    this.clickCount++;
    this.message = `Button clicked ${this.clickCount} times`;
  }

  onInputChange(event: Event) {
    const inputElement = event.target as HTMLInputElement;
    this.userInput = inputElement.value;
  }

  onMouseOver() {
    this.message = 'Mouse is over the box!';
  }

  onMouseLeave() {
    this.message = 'Mouse left the box!';
  }
}

---

📁 event-binding.component.html

<h2>Event Binding in Angular</h2>

<!-- Button Click Event -->
<button (click)="onButtonClick()">Click Me</button>
<p>{{ message }}</p>

<!-- Input Event -->
<input 
  type="text" 
  placeholder="Type something..." 
  (input)="onInputChange($event)">
<p>You typed: {{ userInput }}</p>

<!-- Mouse Events -->
<div 
  (mouseover)="onMouseOver()" 
  (mouseleave)="onMouseLeave()"
  style="width: 200px; height: 100px; border: 1px solid black; text-align: center; padding-top: 30px;">
  Hover Over Me
</div>

✅ Two-Way Data Binding

Two-way data binding allows you to update the component data and the view simultaneously. It combines Property Binding + Event Binding.

⚠ Requirement

To use ngModel, make sure FormsModule is imported in your app.module.ts:

---

📁 two-way-binding.component.ts

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms'; // ✅ Required for [(ngModel)]                                
@Component({
  selector: 'app-two-way-binding',
  imports: [FormsModule], // ✅ Add FormsModule here
  templateUrl: './two-way-binding.component.html'
})
export class TwoWayBindingComponent {
  userName: string = 'John Doe';
  userAge: number = 25;

  resetData() {
    this.userName = '';
    this.userAge = 0;
  }
}

---

📁 two-way-binding.component.html

<h2>Two-Way Data Binding in Angular</h2>

<!-- Two-way binding with ngModel -->
<label>Name: </label>
<input [(ngModel)]="userName" placeholder="Enter your name">

<br><br>

<label>Age: </label>
<input type="number" [(ngModel)]="userAge" placeholder="Enter your age">

<br><br>

<!-- Live update display -->
<p>Your Name: {{ userName }}</p>
<p>Your Age: {{ userAge }}</p>

<!-- Button to clear input -->
<button (click)="resetData()">Reset</button>

📚 Conclusion

Data binding is a core concept that makes Angular scalable and reactive. Mastering these forms helps you build dynamic, efficient UIs easily.