Utilities

Relative Time

"5 minutes ago", "yesterday", "in 3 days" — a date said relative to now in the tectra locale.

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

Features4

API

Theming

Basic

Within a day the pipe counts minutes and hours; past midnight it switches to calendar days, then months and years.


Deploy finished	now
Comment added	7 minutes ago
Report scheduled	tomorrow
Invoice paid	2 days ago
Trial ends	in 12 days
Account created	last year

5 lines

<tx-table ariaLabel="Activity" dataKey="id" [value]="events" [columns]="columns">  <ng-template txTableCell="at" let-value="value">    <span [title]="value | txDate: 'medium'">{{ value | txRelativeTime }}</span>  </ng-template></tx-table>

Options

granularity: 'day' speaks in days only, largestUnit stops at days or months, numeric: 'always' drops "yesterday" for "1 day ago", style shortens the units.


`default`	2 hours ago	yesterday	last month
`granularity: 'day'`	today	yesterday	last month
`largestUnit: 'day'`	2 hours ago	yesterday	45 days ago
`numeric: 'always'`	2 hours ago	1 day ago	1 month ago
`style: 'short'`	2 hr. ago	1 day ago	1 mo. ago

14 lines

<tx-table ariaLabel="Options" dataKey="name" [value]="rows" [columns]="columns">  <ng-template txTableCell="name" let-value="value"    ><code>{{ value }}</code></ng-template  >  <ng-template txTableCell="hours" let-row>{{    hoursAgo | txRelativeTime: row.options  }}</ng-template>  <ng-template txTableCell="yesterday" let-row>{{    yesterday | txRelativeTime: row.options  }}</ng-template>  <ng-template txTableCell="weeks" let-row>{{    weeksAgo | txRelativeTime: row.options  }}</ng-template></tx-table>

Live

Pass now from a ticking signal and the text keeps up: post a message and watch it age. In an app TxClock.now is that signal.

Nothing posted yet.

10 lines

<div class="stack start">  <button txButton label="Post a message" (click)="posted.set(now())"></button>  <span class="hint">    @if (posted(); as at) {      Posted {{ at | txRelativeTime: { now: now(), numeric: 'always' } }}    } @else {      Nothing posted yet.    }  </span></div>

Locale

The pipe follows the tectra locale — this example has its own TxLocaleService, so switching it here leaves the rest of the site alone. Pass locale for a single value.

Updated 3 days agoAlways in Polish: 3 dni temu

12 lines

<div class="stack">  <tx-select    ariaLabel="Language"    [options]="languages"    [ngModel]="locale.locale().code"    (ngModelChange)="locale.setLocale($event)"  />  <span class="hint">Updated {{ updated | txRelativeTime }}</span>  <span class="hint"    >Always in Polish: {{ updated | txRelativeTime: { locale: 'pl-PL' } }}</span  ></div>