Templates & Binding

Template Syntax

Angular templates are HTML-based with added syntax for data binding, directives, and template variables. Templates can be inline (defined with the template property) or external (using templateUrl). They support standard HTML elements, Angular components, and special Angular constructs.

Template Statements

Template statements are methods or properties in the component class that respond to events raised in the template. They are written within parentheses () on the right side of an event binding. Template statements can call methods, assign values, or use basic operators.

<button (click)="save($event)">Save</button>
<input (keyup.enter)="search(term.value)" #term>

Template Reference Variables (#)

Template reference variables provide a way to access a DOM element, directive, or component directly within the template. They are declared with the # prefix and can be used anywhere in the same template.

<input #phone placeholder="Phone number">
<button (click)="call(phone.value)">Call</button>

Template reference variables are scoped to the template they are declared in. They are resolved before any structural directive context variables.

SVG Templates

Angular supports SVG in templates, allowing you to create dynamic, data-driven graphics. You can bind attributes, events, and use Angular directives within SVG elements just like HTML.

<svg width="200" height="200">
  <circle [attr.cx]="cx" [attr.cy]="cy" r="20"
          (click)="moveCircle()" fill="#dd0031"/>
</svg>

Data Binding Overview

Angular provides four primary forms of data binding, each with a distinct direction of data flow:

Interpolation — from component to template (one-way).
Property binding — from component to template (one-way).
Event binding — from template to component (one-way).
Two-way binding — bidirectional with [(ngModel)].

Interpolation {{ }}

Interpolation embeds component property values into the template. Angular evaluates the expression between double curly braces and converts it to a string.

<p>Welcome, {{ username }}!</p>
<p>You have {{ cart.length }} items in your cart.</p>
<p>Total: {{ price * quantity | currency }}</p>

Event Binding

Event binding listens to DOM events and executes template statements. Target events are wrapped in parentheses.

<button (click)="toggle()">Toggle</button>
<form (ngSubmit)="onSubmit()" #myForm="ngForm">
<input (keyup.escape)="clearInput()">

Property Binding [property]

Property binding sets an element property to a component value. Use square brackets around the property.

<img [src]="user.avatarUrl">
<button [disabled]="isSaving">Save</button>
<app-child [user]="selectedUser"></app-child>

Attribute Binding [attr.]

Use attribute binding when an element does not have a corresponding DOM property, such as ARIA attributes, colspan, or SVG attributes.

<td [attr.colspan]="colspan">Merged cell</td>
<div [attr.aria-label]="labelText">Content</div>

Class Binding [class.name]

Dynamically add or remove CSS classes:

<div [class.active]="isActive">Active item</div>
<div [class.valid]="isValid" [class.invalid]="!isValid">Status</div>
<div [class]="dynamicClasses">Multiple classes</div>

Style Binding [style.prop]

Set inline styles dynamically. Supports units like px, em, and %.

<div [style.color]="textColor">Styled text</div>
<div [style.font-size.px]="fontSize">Font sized</div>
<div [style.background]="bgColor">Background</div>

Two-Way Binding [(ngModel)]

Two-way binding combines property binding and event binding into one convenient syntax using [(ngModel)]. It requires FormsModule to be imported.

<input [(ngModel)]="username" placeholder="Username">
<p>Hello, {{ username }}!</p>

Under the hood, [(ngModel)] is syntactic sugar for [ngModel]="username" (ngModelChange)="username=$event".

Summary

You have learned the full spectrum of Angular template syntax and data binding: interpolation, event binding, property binding, attribute binding, class binding, style binding, and two-way binding. These binding mechanisms form the communication backbone between your component logic and the user interface.

Exercise 3: Create a simple profile editor component. Use interpolation to display a user's name and bio. Use property binding for the avatar image. Use event binding on an "Edit" button to toggle editing mode. Use two-way binding on input fields to edit the name and bio. Use class binding to highlight the active field. Display a character count using style binding that turns red when the bio exceeds 200 characters.