Data Binding in Angular

Definition (interview-ready):
Data binding is the mechanism that allows communication between the component (TypeScript) and the view (HTML template).

It keeps your UI and data in sync.

Types of Data Binding (VERY IMPORTANT for interviews)

1. Interpolation (One-way: TS → HTML)

Used to display data from component to UI.

<h1>{{ title }}</h1>

✔ Sends data from component → view
✔ Only for displaying values

2. Property Binding (One-way: TS → HTML)

<img [src]="imageUrl">
<button [disabled]="isDisabled">Click</button>

✔ Binds to HTML element properties
✔ Used when DOM property needs dynamic value

3. Event Binding (One-way: HTML → TS)

<button (click)="handleClick()">Click Me</button>

✔ Sends user actions to component
✔ Used for events like click, input, change

4. Two-Way Binding (TS ↔ HTML)

<input [(ngModel)]="username">

✔ Combines property + event binding
✔ Requires FormsModule
✔ Keeps both UI and component in sync

Internally:

[value]="username" (input)="username = $event.target.value"

Quick Summary Table

Type	Direction	Syntax
Interpolation	TS → HTML	{{ }}
Property Binding	TS → HTML	[property]
Event Binding	HTML → TS	(event)
Two-way Binding	Both directions	[(ngModel)]

Interview Tips

• Interpolation is for display only, not for complex logic

• Property binding works with DOM properties, not attributes

• Two-way binding is mostly used in forms

• Avoid overusing two-way binding in large apps (performance/readability)

Directives in Angular

Definition (interview-ready):
Directives are instructions in Angular that modify the DOM structure or behavior.

Types of Directives

1. Component Directives

• Every component is a directive with a template

• Most commonly used

2. Structural Directives (change DOM structure)

They add/remove elements from DOM.

Common ones:

*ngIf

<div *ngIf="isVisible">Hello</div>

✔ Adds/removes element based on condition

*ngFor

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

✔ Loops through collections

*ngSwitch

<div [ngSwitch]="role">
  <p *ngSwitchCase="'admin'">Admin</p>
  <p *ngSwitchDefault>User</p>
</div>

✔ Conditional rendering

Important Interview Point:

* is syntactic sugar for <ng-template>

Example:

<div *ngIf="isVisible"></div>

becomes:

<ng-template [ngIf]="isVisible">
  <div></div>
</ng-template>

3. Attribute Directives (change appearance/behavior)

They do NOT change DOM structure, only modify existing elements.

Common ones:

ngClass

<div [ngClass]="{'active': isActive}"></div>

✔ Adds/removes CSS classes

ngStyle

<div [ngStyle]="{'color': textColor}"></div>

✔ Applies inline styles

🔹 Custom Directive (Important for interviews)

You can create your own directive.

Example:

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

Usage:

<p appHighlight>Highlighted text</p>

 Key Differences (Very Common Interview Question)

Feature	Structural Directive	Attribute Directive
Changes DOM structure	✅ Yes	❌ No
Uses *	✅ Yes	❌ No
Example	*ngIf, *ngFor	ngClass, ngStyle

Interview Tips

• Only one structural directive per element
  (use <ng-container> if needed)

• Structural directives work with templates internally

• Attribute directives are lightweight and widely used for styling

Common Interview Questions

1. Difference between interpolation and property binding?

• Interpolation → string rendering

• Property binding → binds to DOM properties

2. Can we use multiple structural directives on same element?

❌ No
✔ Use:

<ng-container *ngIf="condition">
  <div *ngFor="let item of items"></div>
</ng-container>

3. What happens internally in two-way binding?

It combines:

• Property binding [value]

• Event binding (input)

4. What is the use of directives?

To manipulate DOM dynamically without directly accessing it

Final One-Line Summary

• Data Binding → connects data between component and UI

• Directives → control how UI behaves and renders