Data Binding: Interpolation & Property Binding in Angular

Connect your component logic to your HTML template to create dynamic and responsive views in Angular.

Welcome! Let's learn how to make our Angular components talk to their templates.

/* Starting the journey into data binding... */

Interpolation: Displaying Data with {{ }}

Interpolation lets you embed expressions from your component class directly into the HTML template. It's the simplest way to display data. You use double curly braces {{ expression }}, and Angular replaces them with the string representation of the expression's result.

Property Binding: Controlling Elements with [ ]

Property Binding is used to set a property of a DOM element (like `src`, `href`, or `disabled`) to the value of a component property. The syntax uses square brackets [property]="expression". This is powerful for controlling element behavior and attributes dynamically.

The Result: A Dynamic View

These two techniques form the foundation of one-way data binding in Angular—data flows from your component's logic to its template. Mastering them allows you to create views that dynamically reflect your application's state.

Practice Zone

Interactive Test 1: Match the Concept

Match the Angular data binding syntax to its correct description.

Arrastra en el orden correspondiente.

Arrastra las opciones:

<h1>{{ pageTitle }}</h1>

Completa el código:

Displaying component data as text in the template.______

Setting an element's attribute or property dynamically.______

Unlock with Premium

Interactive Test 2: Complete the Code

Rellena los huecos en cada casilla.

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

@Component({
  selector: 'app-user-profile',
  template: `
    <h2> }}</h2>
    <button []="isButtonDisabled">Submit</button>
  `
})
export class UserProfileComponent {
   = 'User Profile';
  isButtonDisabled = true;
}

Unlock with Premium

Practice Example: Code Editor

Create a component with a property `username` and display it in a `p` tag. Add an `img` tag and use property binding to set its `src` to a component property `avatarUrl`.

Enunciado:

Data Binding in Angular vs React

In Angular, two main approaches are used for data binding:

Interpolation: Uses {{ variable }} to insert values directly into the template.
Property Binding: Uses [attribute]="variable" to bind DOM properties to values in the component.

Conversion to React:

{{ variable }} is replaced with {variable} in JSX.
Angular's [attribute] becomes a JSX attribute with braces {attribute}.

* Escribe el código a continuación. Los caracteres correctos se mostrarán en verde y los incorrectos en rojo.

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

@Component({
  selector: 'app-my-component',
  template: `
    <h1>{{ message }}</h1>
    <button [disabled]="isDisabled">Click me</button>
  `,
})
export class MyComponent {
  message = 'Hello from Angular!';
  isDisabled = true;
}

Unlock with Premium

Knowledge Check

To disable a button based on a boolean property `canSubmit` in your component, which syntax is correct?

Unlock with Premium

Data Binding in Action

Interpolation and Property Binding are the building blocks for dynamic templates in Angular. Here’s how they integrate with other common Angular features.

1. Dynamic List Rendering with *ngFor

When rendering a list of items with the `*ngFor` directive, you'll use interpolation to display each item's properties. It's the most common combination for displaying collections of data.

<li *ngFor="let user of users">
  <img [src]="user.avatarUrl" />
  {{ user.name }}
</li>

User One
User Two
User Three

2. Conditional Styling with [ngClass]

Property binding is essential for dynamic styling. You can bind directly to the `[ngClass]` directive to apply CSS classes based on component logic, perfect for validation, status changes, or selections.

// Component: { isSpecial: true }

<div [ngClass]="{ 'special-item': isSpecial }">
  Special Content
</div>

Special Content

3. Passing Data to Child Components with @Input

Property binding is how you pass data from a parent component to a child. The child declares an ` @Input() ` property, and the parent binds to it using square brackets, creating a one-way data flow.


<app-user-profile [user]="selectedUser">
</app-user-profile>

Parent sends data to Child

Practical Takeaway: Mastering one-way data binding allows you to create components whose views are a direct, readable reflection of their state, making your application predictable and easy to debug.

Angular Data Binding Glossary

Data Binding: The process that establishes a connection between the application UI (the template) and the business logic (the component). In Angular, data binding defines how these two parts communicate.
Interpolation ({{ }}): A form of one-way data binding used to output data from the component to the template as text. The expression inside the braces is evaluated and converted to a string.
Property Binding ([ ]): A form of one-way data binding used to set a property of a target element (like an HTML attribute, a component property, or a directive property) to a value from the component.
Template Expression: A JavaScript-like expression that Angular evaluates within a data binding. You can use them inside {{ }} and `[ ]`, but they have limitations (e.g., no assignments, no `new` keyword).
One-Way Data Binding: A type of data flow where data moves in a single direction: from the component to the template. Both interpolation and property binding are examples of this.