Utilities

Clock

One shared clock: a now signal that ticks every second in the browser and countdowns to a date as signals. No timer runs on the server.

Part of @tectra-ng/utils (npm install @tectra-ng/utils, also included in tectra-ng).

Features3

API

Theming

Now

now is a signal of the current time; format it with any date pipe.

23:32:34Wednesday, 11 November 2026

Countdown

countdown() gives the time left, an "ending soon" flag (the last 20 seconds here) and an "expired" flag. Start a 30-second offer.

11 lines

<div class="flex">  <button txButton label="Start a 30 s offer" (click)="start()"></button>  @if (endsAt()) {    <tx-tag      [severity]="offer.isExpired() ? 'secondary' : offer.isEndingSoon() ? 'danger' : 'success'"      [value]="        offer.isExpired() ? 'Offer ended' : 'Ends in ' + (offer.remainingMs() | txRemainingTime)      "    />  }</div>

Relative

Pass clock.now() to txRelativeTime and the texts keep up by themselves.


Ann	11 seconds ago
Mark	1 minute ago

5 lines

<tx-table ariaLabel="Comments" dataKey="id" [value]="comments" [columns]="columns">  <ng-template txTableCell="at" let-value="value">{{    value | txRelativeTime: { now: clock.now(), numeric: 'always' }  }}</ng-template></tx-table>