Easy To Use Time Picker for Angular Apps

ng-clockpicker is a clock-style time picker for the Angular app, inspired by Material Design.

angular material time picker, angular time picker dropdown, angular timepicker npm, custom time picker angular, time picker in angular

JQuery Plugin Clock Timer Inspired Android Time Picker

How to make use of it:

Install:

npm i ng-clock-picker-lib --save

1. Add NgClockPickerLibModule to your module imports:

import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { NgClockPickerLibModule } from 'ng-clock-picker-lib';
 
 import { AppComponent } from './app.component';
 
 @NgModule({
   declarations: [
     AppComponent,
   ],
   imports: [
     BrowserModule,
     NgClockPickerLibModule,
     ReactiveFormsModule,
     FormsModule,
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

2. With reactive forms:

<form [formGroup]="form">
  <input ngClockPicker [ngClockPickerConfig]="config" formControlName="time" />
</form>

3. With template-driven forms:

<input [(ngModel)]="time" ngClockPicker [ngClockPickerConfig]="config" />

4. With event binding:

<input ngClockPicker (ngClockPickerChange)="handleTimeChange($event)" />

5. By injecting service straight into the component:

import { Component, ViewContainerRef } from '@angular/core';
import { ClockPickerDialogService, ClockPickerConfig } from 'ng-clock-picker-lib';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  config: ClockPickerConfig = { 
    wrapperClassName: 'className', 
    closeOnOverlayClick: true 
  };
  
  constructor(private vcr: ViewContainerRef, private clockPickerDialogService: ClockPickerDialogService) {}
  

  ngOnInit(): void {
    this.clockPickerDialogService.registerViewContainerRef(this.vcr);
  }
  
  showModal(): void {
    this.clockPickerDialogService.showClockPickerDialog(this.config).subscribe((time: string) => console.log(time))
  }
}