Events & forms

Bind an event#

Use Angular’s event binding syntax. The browser serializes the event, the server evaluates its expression, and change detection sends back any changed views. The $event value exposes serialized fields such as target.value and custom-event detail.

<button (click)="save()">Save</button>
<input (keyup.enter)="search($event.target.value)">
<canvas data-jsp-hook="chart"
        (point-picked)="select($event.detail.index)"></canvas>

Keep a form in sync#

Two-way ngModel works with plain writable fields and WritableSignal values. Use a submit handler for form actions; the browser runtime prevents the default submit navigation. Validate external values in Java before using them.

<form (submit)="save()">
  <label for="name">Your name</label>
  <input id="name" name="name" [(ngModel)]="name" required>
  <button type="submit" [disabled]="saving()">Save</button>
</form>

Control browser defaults#

The server cannot cancel a browser action after the network trip. Jaspring decides preventDefault and stopPropagation from the handler when it renders.

An expression ending in false or calling $event.preventDefault() gets a prevent-default flag. Calling $event.stopPropagation() adds a stop-propagation flag. The browser applies those flags before sending the event.

<a href="/fallback" (click)="openPanel(); false">Open panel</a>
<button (click)="$event.stopPropagation(); select()">Select</button>

Choose the transport#

WebSocket is the default and uses one connection per page. If it cannot connect, the runtime falls back to HTTP. HTTP posts events and polls while asynchronous work is pending. Transport off renders ordinary HTML without live handlers or the client runtime.

jaspring:
  live:
    transport: websocket # websocket, http, or off