Angular library for easier use of the View Transitions API
https://derstimmler.github.io/ngx-analog-clock/
Available on npm.
npm install ngx-analog-clockRequired Angular version: >=19.0.0
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() });| 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.
The component behaves like a normal block element and scales dynamically. So just set the width and height as you like.