import 'zone.js'; import { Component, computed, effect, model, signal } from '@angular/core'; import { DecimalPipe, JsonPipe } from '@angular/common'; import { FormsModule, NG_VALUE_ACCESSOR, ControlValueAccessor, } from '@angular/forms'; import { bootstrapApplication } from '@angular/platform-browser'; export type Time = { hour: number; minute: number; }; export function isEqualTime(a: Time, b: Time) { return a.hour === b.hour && a.minute === b.minute; } @Component({ selector: 'app-time-input', standalone: true, imports: [FormsModule, DecimalPipe], template: `

`, providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: TimeInputComponent, multi: true, }, ], styles: `:host { display: inline-block; }`, }) export class TimeInputComponent implements ControlValueAccessor { protected readonly hourOptions = getRange(0, 23); protected readonly minuteOptions = getRange(0, 59); readonly value = model({ hour: 0, minute: 0 }); readonly #changedValue = computed(() => this.value(), { equal: isEqualTime }); constructor() { // Emit value change to form control effect(() => { this.#onChangeListener(this.#changedValue()); }); } updateHour(value: number) { this.value.update((curr) => ({ ...curr, hour: value })); } updateMinute(value: number) { this.value.update((v) => ({ ...v, minute: value })); } // ControlValueAccessor implementation #onChangeListener = (_: Time) => {}; writeValue(value: Time): void { this.value.set(value); } registerOnChange(fn: (v: Time) => void): void { this.#onChangeListener = fn; } registerOnTouched(fn: any): void { // noop } } @Component({ selector: 'app-root', standalone: true, imports: [FormsModule, TimeInputComponent, JsonPipe], template: `

[(value)]

[(ngModel)]

`, }) export class App { readonly value = signal({ hour: 0, minute: 0 }); readonly ngModelValue = signal({ hour: 0, minute: 0 }); } bootstrapApplication(App); function getRange(from: number, to: number) { return Array.from({ length: to - from }).map((_, i) => from + i); }