How to get data from Timeless-time-picker using form control

Question

<timeless-time-picker [hourFormat]="'hours24'" [visibleItemsCount]="3" [size]="'medium'" [theme]="'dark'"
  [selectionHighlightStyle]="'none'" [selectionBoxBackground]="true" [showDivider]="true" [showSeconds]="false"
  [minuteStep]="1">
  <div class="custom-selection" custom-selection-highlight></div>
</timeless-time-picker>

nedd to display time formcontrol

Answer 1

I tried using this package in angular 17 and angular 15.2 (which is the version on which this was developed, both are giving errors which are internal to package and the getting started guide, would suggest you abandon implementing this package until its resolved by the author and look for alternatives instead!

Suppose it runs on your system, this is how it might look to implement formControl on this package!

import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { TimelessPickerModule } from 'timeless-picker';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule, TimelessPickerModule, CommonModule],
  template: `
    <form [formGroup]="formGroup">
      <timeless-time-picker [hourFormat]="'hours24'" [visibleItemsCount]="3" [size]="'medium'" [theme]="'dark'"
        [selectionHighlightStyle]="'none'" [selectionBoxBackground]="true" [showDivider]="true" [showSeconds]="false" formControlName="time"
        [minuteStep]="1">
        <div class="custom-selection" custom-selection-highlight></div>
      </timeless-time-picker>
    </form>

    {{formGroup.value | json}}
  `,
})
export class App {
  name = 'Angular';
  formGroup: FormGroup = new FormGroup({
    time: new FormControl(null),
  });
}

bootstrapApplication(App);

I am attaching links to the angular 17 and angular 15.2 stackblitz for your perusal!

angular 15.2 stackblitz -> cd test -> npm i -> npm run start

angular 17 stackblitz