Data Binding

Binding: It allows us to define communication between the component and view. So we can say that data binding is passed from component to view and from view to the component.

String Interpolation

Interpolation or String Interpolation {{ }} - Interpolation binding is used to return HTML output from TypeScript code i.e. from the components to the views. Here, the template expression is specified within double curly braces.

Property binding []

In Property binding, value flows from a component’s property into the target elements property.

Event binding (click)="event()"

The Event binding feature lets you listen to certain events such as mouse movements, keystrokes, clicks, etc.

Two-way Binding [(ngModel)]="abc"

two-way data binding that will allow your application to share data in two directions i.e. from the components to the templates and vice versa.

In the context of Angular (which relies heavily on TypeScript), these three terms represent different layers of how your application handles data. It is a common source of confusion, but the distinction lies in Type Safety (Interface) vs. Behavior (Model) vs. Validation (Schema).

Here is the breakdown:

---

1. Interface (The "Shape")

"What the data looks like."

In TypeScript/Angular, an Interface is a compile-time construct. It defines the structure (properties and types) of an object. It tells Angular, "Hey, make sure this object has a firstName that is a string and an age that is a number."

• Purpose: Type safety and IntelliSense (autocomplete).
• Runtime Behavior: None. Interfaces are "erased" when TypeScript compiles to JavaScript. They do not exist in the browser. You cannot write code inside an interface.
• Angular Use Case: Used to type the @Input of components or the return type of HTTP Service calls.

Code Example:

export interface UserInterface {
  id: number;
  username: string;
  isActive: boolean;
}

---

2. Model (The "Logic")

"What the data does."

A Model is typically a Class. Like an interface, it defines the shape, but because it is a class, it can also contain methods (functions) and a constructor. It represents the business entity.

• Purpose: To hold data and manipulate it.
• Runtime Behavior: It exists in the JavaScript. You can instantiate it: new User().
• Angular Use Case: When you need to calculate a value (like getFullName()) or format data before sending it to the backend.

Code Example:

export class UserModel {
  id: number;
  username: string;
  isActive: boolean;

  constructor(data: UserInterface) {
    this.id = data.id;
    this.username = data.username;
    this.isActive = data.isActive;
  }

  // Behavior: A method only a Model can have
  getDisplayName(): string {
    return this.isActive ? this.username : 'Inactive User';
  }
}

---

3. Schema (The "Rules")

"What the data must follow."

A Schema is usually a blueprint used for validation. It defines strict rules about what data is acceptable. While Interfaces are for TypeScript development, Schemas are often used to validate data coming from the outside world (User Input forms or API responses).

• Purpose: Validation and error handling.
• Runtime Behavior: It checks data and throws errors if rules are broken (e.g., "email is required" or "age must be 18+").
• Angular Use Case: Used with Reactive Forms or validation libraries like Zod, Joi, or JSON Schema.

Code Example (using a library like Zod):

import { z } from "zod";

// This Schema ensures no invalid data can ever pass
export const UserSchema = z.object({
  id: z.number().int().positive(),
  username: z.string().min(3), // Rule: Must be at least 3 chars
  isActive: z.boolean(),
});

// Usage: If you try to parse bad data, it crashes/fails safely
const result = UserSchema.parse({ id: -1, username: "Bo" }); // THROWS ERROR

---

Summary Comparison Table

Feature	Interface	Model (Class)	Schema
Keyword	interface	class	Object (Zod/JSON)
Primary Role	Definition (Shape)	Implementation (Behavior)	Validation (Rules)
Has Methods?	No	Yes	N/A (Has logic)
Exists in Browser?	No (Erased at compile)	Yes	Yes
Analogy	The Blueprint	The House built	The Building Inspector

Why do you need all three?

1. You get data from an API (JSON). You use a Schema to check if the server sent you garbage.
2. You type that data using an Interface so your code doesn't crash (e.g., trying to .toLowerCase() a number).
3. You convert that data into a Model to run business logic (e.g., user.calculateDiscount()).

How to Prompt AI for this (Context for your TUI)

If you are using Claude Code or GPT to generate Angular code, be specific:

• "Generate an Interface" if you just want type definitions for an API response.
• "Generate a Model Class" if you need helper methods to manipulate the data.
• "Generate a Schema" if you are building a form and need to validate user input.