Solution

In ngOnInit() hook, we will run a timer to refresh the page and display the current time every second. To create the timer, we can use setInterval to initiate the update of our state properties. Within the setInterval body, we will update hours, minutes, seconds and dateTimeDisplay (required for <timer>) based on the current date. In ngOnDestroy(), we will terminate the interval to prevent memory leaks.

Every DigitComponent displays one digit in the clock, so assuming we have time 22:04:22, we put hours to the first two digits and floor it with pipe hours / 10 and hours % 10.

The numbers passed will be 2.1 floored to 2 and 1 which is exact hour we need to display and so on.

DigitComponent is a typical dumb component, used solely for displaying UI based on a number passed by @Input. The responsibility of this component is to display one digit and most of the work here involves manipulating styles.

SeparatorComponent is a dumb UI component designed to display two separator dots between digits.

Angular Insights

• You can adopt a more advanced, reactive-like approach using RxJS (without using subscriptions as possible). However, if you opt for subscriptions, remember about destroying them to prevent memory leaks.

• You might create service for maintaining the state. Inject the service in smart component and crete dumb components that only display and interact with the UI and all events from dumb components are passed to the smart one.

• If you're confident with the latest Angular versions, consider using signals standalone API.

• You can try to focus more on keywords such as readonly, private, public and void.

• If you're creating a bigger application it would be good practice to use styles per component instead of putting all styles in one file.

Test Cases

• See that the clock updates every second.
• Observe the clock for at least 10 seconds to see that each digit is displayed correctly.

Notes

The update frequency of the timer depends on how accurate we want the clock to be. The maximum we can set is 1000ms, however, the clock's accuracy might be off by 1000ms in the case we load the page on the last millisecond of the second. However, using too small of an interval can be quite expensive. Hence a middleground we've chosen is 100ms. The clock can only ever be off by 100ms, which is not very noticeable by humans.

The current date/time should be polled in each loop, as opposed to recording the time when the clock was first rendered and incrementing based on the interval duration of the timer because the invocations of the loop can be delayed by processes hogging the main thread and the loop may not run at every fixed interval.

Accessibility

For a11y reasons, use a <time> element with datetime attribute set to the current time in 24-hour format so that screen readers can read this component. Otherwise the component will be ignored by screen readers, which is bad. Add the aria-hidden attribute to the internals of <time> since they are for presentation purposes and not useful to screen readers.