Utilities

HTTP

Helpers around HttpClient: query params from a filter object, retries of reads with back-off and Retry-After, and pipes that turn a status code into a kit tone and a translated label.

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

Features3

API

Theming

Params

buildHttpParams leaves out what is not set, repeats a key for every picked item and writes dates as ISO strings. Fill the filters and watch the query.

Archived only

GET /api/orders?status=paid&status=shipped&page=1

20 lines

<div class="stack">  <input txInput placeholder="Search" aria-label="Search" [(ngModel)]="search" />  <tx-multiselect    ariaLabel="Status"    placeholder="Status"    [options]="statuses"    [(ngModel)]="status"  />  <tx-datepicker    ariaLabel="Created after"    placeholder="Created after"    [showIcon]="true"    [(ngModel)]="from"  />  <div class="flex">    <tx-toggle-switch inputId="http-params-archived" [(ngModel)]="archived" />    <label for="http-params-archived">Archived only</label>  </div>  <code class="hint">GET /api/orders?{{ query() }}</code></div>

Retry

A pretend server answers 503 twice, then 200. retryHttpReads waits longer before every new try; a 404 fails at once. Short delays here so you can watch it.

9 lines

<div class="layout">  <div class="flex">    <button txButton label="Load (503, 503, 200)" (click)="load([503, 503, 200])"></button>    <button txButton label="Load (404)" severity="secondary" (click)="load([404])"></button>  </div>  <tx-timeline [value]="attempts()">    <ng-template txTimelineContent let-item>{{ item.status }} · {{ item.time }}</ng-template>  </tx-timeline></div>

Status

Status codes as kit tags: the tone from txHttpStatusTone, the text from txHttpStatusLabel in the tectra locale. Codes you pass as warnings get the warn tone.


/	200 · OK
/old-pricing	301 · Redirect
/beta	299 · Warning
/admin	403 · Client error
/api/search	503 · Server error
/status	— · No response

8 lines

<tx-table ariaLabel="Health checks" dataKey="url" [value]="checks" [columns]="columns">  <ng-template txTableCell="status" let-value="value">    <tx-tag      [value]="(value ?? '—') + ' · ' + (value | txHttpStatusLabel: warnCodes)"      [severity]="value | txHttpStatusTone: warnCodes"    />  </ng-template></tx-table>