Templates

Read state and handle events#

Interpolation escapes text. Property bindings reflect values into the corresponding HTML attributes. Event bindings call Java methods or update signals. Read a signal with count() in the template, corresponding to count.get() in Java.

<h1>{{ title }}</h1>
<button [disabled]="saving()" (click)="save()">Save</button>
<input [(ngModel)]="name" aria-label="Your name">
<p>Hello, {{ name() }}</p>
<div [class.highlighted]="count() > 5">{{ count() }}</div>

Use native control flow#

Use @if, @for, and @switch directly. Track list items by a stable key to preserve child component instances. Loops expose $index, $first, $last, $even, $odd, and $count.

@if (users().length > 0) {
  <ul>
    @for (user of users(); track user.id) {
      <li>{{ user.name }}</li>
    }
  </ul>
} @else {
  <p>No users yet.</p>
}

Transform and reuse#

Built-in pipes include case transforms, date, number, percent, currency, json, keyvalue, slice, and async. Custom Java pipes implement PipeTransform and use Jaspring’s @Pipe annotation.

Structural forms such as *ngIf, *ngFor, ngSwitch, and ngTemplateOutlet are supported too. Use ng-content for projection, and ng-template for a reusable template fragment.

<p>{{ title | uppercase }}</p>
<pre>{{ user | json }}</pre>
<p>{{ total | currency:'USD' }}</p>

Understand the boundaries#

Expressions follow JavaScript semantics: strict and loose equality are distinct; optional chaining short-circuits; integral arithmetic results normalize to integers. Java methods and typed signals receive coerced argument values.

Text is escaped. URL bindings use Angular-derived security contexts. innerHTML is sanitized unless given an explicitly trusted SafeHtml. Template references on ordinary elements are server-side ElementRef values, not live browser DOM nodes.