Misc

Countdown

Counts down to zero — a number of units or the time left to a date — and fires completed once at zero.

Features9

API

Theming

Basic

Counts value seconds down to zero with a suffix and fires completed once.

Redirecting in 5 s

16 lines

<div class="row">  @if (running()) {    <span      >Redirecting in <tx-countdown [value]="5" suffix="s" (completed)="running.set(false)"    /></span>  } @else {    <span>Done — this is where the redirect happens.</span>    <button      txButton      label="Start again"      variant="outlined"      size="small"      (click)="running.set(true)"    ></button>  }</div>

Units

unit is seconds, minutes, hours or days; the number shows whole units left. format="clock" shows mm:ss / h:mm:ss instead.

Session expires in 15 min
Next sync in 6 h
Trial ends in 12 days
Same 15 minutes as a clock: 15:00

8 lines

<ul class="list">  <li>Session expires in <tx-countdown [value]="15" unit="minutes" suffix="min" /></li>  <li>Next sync in <tx-countdown [value]="6" unit="hours" suffix="h" /></li>  <li>Trial ends in <tx-countdown [value]="12" unit="days" suffix="days" /></li>  <li>    Same 15 minutes as a clock: <tx-countdown [value]="15" unit="minutes" format="clock" />  </li></ul>

Target

target counts down to a date (a Date, ISO string or milliseconds) and shows a clock by default — here the time left until midnight.

Offer ends in

27:21

Ending soon

endingSoon (ms) turns the countdown to the "ending" colour near zero; tick gives the time left for a progress bar. The usual "auto-apply in N seconds" pattern with Cancel and Apply now.

Auto-apply
The payment is marked as paid when the time is up.

20 s

46 lines

<div class="card">  @switch (state()) {    @case ('waiting') {      <div class="row">        <span>          <strong>Auto-apply</strong><br />          <span class="hint">The payment is marked as paid when the time is up.</span>        </span>        <tx-countdown          class="timer"          suffix="s"          [value]="20"          [endingSoon]="5000"          (tick)="left.set($event)"          (completed)="state.set('applied')"        />      </div>      <tx-progress-bar        ariaLabel="Time left"        [value]="left() / 200"        [severity]="left() <= 5000 ? 'danger' : 'primary'"      />      <div class="actions">        <button          txButton          label="Cancel"          severity="secondary"          (click)="state.set('cancelled')"        ></button>        <button txButton label="Apply now" icon="bolt" (click)="state.set('applied')"></button>      </div>    }    @default {      <div class="row">        <span>{{ state() === 'applied' ? 'Applied.' : 'Cancelled.' }}</span>        <button          txButton          label="Try again"          variant="outlined"          size="small"          (click)="reset()"        ></button>      </div>    }  }</div>

Pause

paused stops the countdown and keeps the time left; it goes on from there.

03:00

18 lines

<div class="row">  <tx-countdown    class="time"    format="clock"    [value]="3"    unit="minutes"    [paused]="paused()"    (completed)="paused.set(true)"  />  <button    txButton    variant="outlined"    size="small"    [icon]="paused() ? 'play' : 'pause'"    [label]="paused() ? 'Resume' : 'Pause'"    (click)="paused.set(!paused())"  ></button></div>

Template

A txCountdownValue template draws the time itself; it gets the milliseconds left and days, hours, minutes, seconds, expired.

3days05hours42minutes00seconds

18 lines

<tx-countdown [target]="launch">  <ng-template    txCountdownValue    let-days="days"    let-hours="hours"    let-minutes="minutes"    let-seconds="seconds"  >    <span class="blocks">      @for (part of [days, hours, minutes, seconds]; track $index) {        <span class="block">          <strong>{{ $index ? (part < 10 ? '0' + part : part) : part }}</strong>          <small>{{ labels[$index] }}</small>        </span>      }    </span>  </ng-template></tx-countdown>

Remaining time

The txRemainingTime pipe formats milliseconds as mm:ss or h:mm:ss — for lists driven by one clock signal.

Backup00:42
Report25:00
Rotation2:05:00

Design tokens

dt changes the weight and the "ending" colour of one countdown.

00:45

Pass through

pt.root styles the countdown — here a pill.

01:30