Counts down to a target date in real time, updating every second. Displays days, hours, minutes, and seconds in individual flip-card boxes. Emits (finished) when zero is reached.
Pass a Date or ISO string to targetDate.
<ply-countdown [targetDate]="launchDate" (finished)="onFinished()"></ply-countdown>
launchDate = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000); // 7 days
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add countdown
// Paths are relative to aliases.components (default: src/app/components)
import { CountdownComponent } from './countdown/countdown.component';
@Component({
selector: 'app-countdown-example',
imports: [
CountdownComponent
],
template: `...`
})
export class CountdownExampleComponent {}Install
npx ply-ui-cli add countdown
Set [showDays]="false" to hide the days segment for short-duration events.
<ply-countdown [targetDate]="eventDate" [showDays]="false"></ply-countdown>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add countdown
// Paths are relative to aliases.components (default: src/app/components)
import { CountdownComponent } from './countdown/countdown.component';
@Component({
selector: 'app-countdown-example',
imports: [
CountdownComponent
],
template: `...`
})
export class CountdownExampleComponent {}Install
npx ply-ui-cli add countdown
Override the unit labels using daysLabel, hoursLabel, minutesLabel, secondsLabel.
<ply-countdown [targetDate]="date" daysLabel="Tage" hoursLabel="Std"></ply-countdown>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add countdown
// Paths are relative to aliases.components (default: src/app/components)
import { CountdownComponent } from './countdown/countdown.component';
@Component({
selector: 'app-countdown-example',
imports: [
CountdownComponent
],
template: `...`
})
export class CountdownExampleComponent {}Install
npx ply-ui-cli add countdown
Run the following command to add this component to your project:
npx ply-ui-cli add countdown
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.
npx -y ply-ui-mcp
Ply provides standalone components. Import the exact elements you want to use into your component.
// Install: npx ply-ui-cli add countdown
// Paths are relative to aliases.components (default: src/app/components)
import { CountdownComponent } from './countdown/countdown.component';
@Component({
selector: 'app-your-component',
imports: [
CountdownComponent
],
template: `...`
})
export class YourComponent {} API for countdown — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
ply-countdown | class | string | '' | Extra host classes merged via `cn()`. |
ply-countdown | targetDate | Date | string | — | Instant the countdown ends. Accepts a `Date` or an ISO/parseable string. |
ply-countdown | showDays | boolean | true | Whether to show the days unit. |
ply-countdown | daysLabel | unknown | 'Days' | Label under the days value. |
ply-countdown | hoursLabel | unknown | 'Hours' | Label under the hours value. |
ply-countdown | minutesLabel | unknown | 'Min' | Label under the minutes value. |
ply-countdown | secondsLabel | unknown | 'Sec' | Label under the seconds value. |
ply-countdown | (tick) | CountdownTime | — | Emits on every tick with the remaining time breakdown. |
ply-countdown | (finished) | void | — | Emits once when the countdown reaches zero. |
Content