ngx-analog-clock

Angular library for easier use of the View Transitions API

Demo

https://derstimmler.github.io/ngx-analog-clock/

Installation

Available on npm.

npm install ngx-analog-clock

Required Angular version: >=19.0.0

Usage

Import the component:

import { NgxAnalogClock } from 'ngx-analog-clock';

date = new Date();

Provide at least a Date object to the component:

<ngx-analog-clock [date]="date"></ngx-analog-clock>

Tip

To get a Date signal of the current local time that updates every second you can use this snippet:

import { toSignal } from '@angular/core/rxjs-interop';
import { map, interval } from 'rxjs';

date = toSignal(interval(1000).pipe(map(() => new Date())), { initialValue: new Date() });

Configuration

Input	Description	Default Value
date	Current date/time driving the clock	Required
showHourHand	Toggle visibility of the hour hand	true
showMinuteHand	Toggle visibility of the minute hand	true
showSecondHand	Toggle visibility of the second hand	true
showHourMarkers	Show hour tick markers	true
showMinuteMarkers	Show minute tick markers	true
showClockNumbers	Display clock face numbers	true
showBezel	Show outer bezel (rim)	true
transitionDuration	Duration of hand movement transitions	'0.5s'
transitionFunction	CSS transition timing function for hand movement	'cubic-bezier(0.4, 2, 0.3, 1)'
bezelThickness	Thickness of the bezel	'3px'
pivotThickness	Size of the pivot (center cap)	'12px'
hourHandThickness	Thickness of the hour hand	'9px'
hourHandLength	Length of the hour hand relative to radius	'60%'
minuteHandThickness	Thickness of the minute hand	'6px'
minuteHandLength	Length of the minute hand relative to radius	'90%'
secondHandThickness	Thickness of the second hand	'3px'
secondHandLength	Length of the second hand relative to radius	'97%'
pivotColor	Color of the pivot	'#ff0000'
hourHandColor	Color of the hour hand	'#222222'
minuteHandColor	Color of the minute hand	'#222222'
secondHandColor	Color of the second hand	'#222222'
hourMarkerColor	Color of the hour markers	'#222222'
minuteMarkerColor	Color of the minute markers	'#222222'
clockNumberColor	Color of the numbers	'#222222'
dialColor	Background color of the clock face	'transparent'
bezelColor	Color of the bezel	'#222222'
markerOffsetPercent	Radial offset for markers (relative to radius)	96
numbersOffsetPercent	Radial offset for numbers (relative to radius)	70
hourMarkerThickness	Thickness of hour markers	'2%'
hourMarkerLength	Length of hour markers	'7%'
minuteMarkerThickness	Thickness of minute markers	'1%'
minuteMarkerLength	Length of minute markers	'3%'
hourHandBorderRadius	Border radius of the hour hand	'2px'
minuteHandBorderRadius	Border radius of the minute hand	'2px'
secondHandBorderRadius	Border radius of the second hand	'2px'
minuteMarkerBorderRadius	Border radius of minute markers	'2px'
hourMarkerBorderRadius	Border radius of hour markers	'2px'

Most color inputs like dialColor, minuteHandColor or hourMarkerColor are implemented as CSS background property. So it's also possible to use gradient or even images.

Responsiveness

The component behaves like a normal block element and scales dynamically. So just set the width and height as you like.