ANGULAR: Angular Data Binding | Amr Tarek

To display data from a TypeScript component in the HTML template, Angular provides two primary techniques:

Interpolation — embed values directly into text content
Attribute Binding — bind values to HTML element attributes and properties

Both techniques keep the template in sync with the component's data automatically.

Setting Up a Data Model

Before looking at the binding syntax, let's define a typed data model. In Angular, it is common practice to create a separate model file in the component directory.

product.model.ts

export interface IProduct {
  id: number;
  description: string;
  name: string;
  imageName: string;
  price: number;
  discount: number;
}

Then use this interface in the component class:

import { IProduct } from './product.model';

export class CatalogComponent {
  product: IProduct;

  constructor() {
    this.product = {
      id: 1,
      description: "This is the product description",
      name: "This is the Product name",
      imageName: "product.png",
      price: 199,
      discount: 0.2,
    };
  }

  getImageUrl(product: IProduct): string {
    return '/assets/image/products/' + product.imageName;
  }
}

Interpolation `{{ }}`

Interpolation uses double curly braces {{ }} to embed a TypeScript expression directly into the HTML text content. Angular evaluates the expression and inserts the result as a string.

<div class="name">{{ product.name }}</div>
<div>$ {{ product.price.toFixed(2) }}</div>
<img src="{{ '/assets/image/robot-parts/' + product.imageName }}" alt="{{ product.name }}" />

Expression	Output
`{{ product.name }}`	The product name string
`{{ product.price.toFixed(2) }}`	Price formatted to 2 decimal places
`{{ '/path/' + product.imageName }}`	Concatenated string

Interpolation works for any TypeScript expression that returns a value:

<p>{{ 2 + 2 }}</p>                        <!-- outputs: 4 -->
<p>{{ product.discount * 100 }}% off</p>  <!-- outputs: 20% off -->
<p>{{ product.name.toUpperCase() }}</p>   <!-- outputs: THIS IS THE PRODUCT NAME -->

Attribute Binding `[ ]`

Attribute binding uses square brackets [ ] to bind a TypeScript expression to an HTML element's attribute or property. Unlike interpolation (which produces text), attribute binding sets the actual DOM property.

<img [src]="'/assets/image/robot-parts/' + product.imageName" [alt]="product.name" />

The square brackets tell Angular to evaluate the expression inside the quotes as TypeScript rather than treating it as a plain string.

Comparing Interpolation vs. Attribute Binding

Both of these produce the same result for simple values:

<!-- Interpolation -->
<img src="{{ product.imageName }}" />

<!-- Attribute Binding -->
<img [src]="product.imageName" />

However, attribute binding is more powerful because it can bind to non-string properties:

<!-- Bind a boolean to the disabled property -->
<button [disabled]="product.price === 0">Buy</button>

<!-- Bind a number to a custom property -->
<app-rating [value]="product.discount * 5"></app-rating>

Binding to CSS Classes and Styles

Angular also supports binding to CSS classes and inline styles:

<!-- Add 'on-sale' class only if discount > 0 -->
<div [class.on-sale]="product.discount > 0">
  {{ product.name }}
</div>

<!-- Set inline style dynamically -->
<div [style.color]="product.discount > 0 ? 'red' : 'black'">
  ${{ product.price.toFixed(2) }}
</div>

Data Binding Summary

Component TypeScript                  HTML Template
--------------------                  -------------

product.name  ------------------>  {{ product.name }}
                  Interpolation

product.imageName  ------------->  [src]="product.imageName"
                  Attr Binding

Technique	Syntax	Use For
Interpolation	`{{ expression }}`	Text content, string values
Attribute Binding	`[attribute]="expression"`	DOM properties, boolean attributes, non-string values

Summary

Data binding is how Angular components communicate with their templates. Interpolation is the quickest way to display text values, while attribute binding gives full control over DOM properties and non-string values.

Master these two techniques first — they are used in every Angular component you will ever write.