Angular Templates

What Is an Angular Template?

A template is ordinary HTML augmented with Angular syntax: interpolation for text, bindings for properties and events, and directives for structure and behavior. Angular compiles templates into efficient render instructions rather than interpreting them at runtime.

Templates can be written inline as a string on the @Component decorator, or, more commonly for anything beyond a couple of lines, in a separate .html file referenced via templateUrl.

<div class="profile">
  <h2>{{ user.name }}</h2>
  <p [class.vip]="user.isVip">{{ user.email }}</p>
  <button (click)="editProfile()">Edit</button>
</div>

This template combines interpolation, a class binding, and an event binding in a single view.

Core Template Syntax

{{ expression }}          <!-- interpolation -->
[property]="expression"   <!-- property binding -->
(event)="statement"       <!-- event binding -->
[(ngModel)]="value"       <!-- two-way binding -->
*directive="expression"   <!-- structural directive -->

• Interpolation renders a string result of an expression between tags or in an attribute.
• Property bindings use square brackets and update a DOM property whenever the expression changes.
• Event bindings use parentheses and run a statement when the event fires.
• Structural directives like *ngFor and *ngIf add or remove elements from the DOM.

Angular Template Syntax Cheatsheet

The syntax forms you will use constantly while writing templates.

Interpolation and Template Expressions

Interpolation evaluates a JavaScript-like expression and inserts the string result into the DOM. Expressions can access any public property or method on the component class, but should stay simple, templates are not the place for complex logic.

<p>{{ 'Hello, ' + user.name }}</p>
<p>{{ items.length }} items in cart</p>
<p>{{ getDiscountLabel() }}</p>

Structural Directives vs the New Control Flow

Classic Angular uses structural directives prefixed with *, like *ngIf and *ngFor. Since Angular 17, a new built-in control flow syntax (@if, @for, @switch) offers the same capability with cleaner syntax and better performance, without needing to import CommonModule.

<!-- classic -->
<p *ngIf="user">{{ user.name }}</p>
<li *ngFor="let item of items">{{ item.name }}</li>

<!-- modern control flow -->
@if (user) {
  <p>{{ user.name }}</p>
}
@for (item of items; track item.id) {
  <li>{{ item.name }}</li>
}

@for requires a track expression, usually a unique id, to efficiently reconcile list changes.

Template Reference Variables

A template reference variable, declared with #name, gives you direct access to a DOM element or a component/directive instance from within the same template, useful for reading input values without two-way binding.

<input #emailInput type="email" />
<button (click)="submit(emailInput.value)">Submit</button>

Common Mistakes

• Writing complex, multi-step logic directly inside template expressions instead of a component method.
• Forgetting track in the new @for syntax, which is required (unlike the optional trackBy in *ngFor).
• Mixing *ngIf/*ngFor and @if/@for inconsistently across a codebase without a clear migration plan.
• Using template reference variables across separate templates, they are only valid within the template they are declared in (with narrow exceptions).

Key Takeaways

• Templates are HTML extended with interpolation, bindings, and directives.
• Property, event, and two-way bindings connect a template to component class properties and methods.
• The modern @if/@for/@switch control flow is the recommended replacement for *ngIf/*ngFor/*ngSwitch.
• Template reference variables (#name) expose elements or directives to other bindings in the same template.