Timepicker (Clock Picker) for Angular 2, Angular 4 and Angular 5, Angular 6, Angular 7 - Compatible with Angular Material
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode Code refactor (#39) Jan 21, 2018
cypress Add Angular2 package dependencies and test that (#45) Jan 24, 2018
dist Update Dec 22, 2018
docs Update Dec 22, 2018
e2e chore: initial commit from @angular/cli Dec 23, 2017
scripts Add Angular2 package dependencies and test that (#45) Jan 24, 2018
.angular-cli.json Redirect to pixelplux (#118) Dec 22, 2018
.editorconfig chore: initial commit from @angular/cli Dec 23, 2017
.travis.yml Redirect to pixelplux (#118) Dec 22, 2018
README.md Update Dec 22, 2018
cypress.json Update the cypress code Jan 18, 2018
deploy.sh Update the github pages Jan 18, 2018
ng-package.json Change Packagr destination when transpiled package Jan 19, 2018
package-lock.json Revert package lock (#116) Dec 21, 2018
package.json Update Dec 22, 2018
protractor.conf.js chore: initial commit from @angular/cli Dec 23, 2017
time-picker.jpg change all files Dec 25, 2017
tsconfig.json chore: initial commit from @angular/cli Dec 23, 2017
tslint.json open modal Programmatically (#18) Dec 27, 2017


Amazing Time Picker (Clock) Build Status License: MIT

A visual time picker for angular 2+ projects. You can use this timepicker with Angular 2, 4, 5, 6, 7 and Angular Material. This project doesn't require angular material or any other dependencies

Angular 6, 7 support since version 1.8.0

After some delay we have now support for Angular 6+. Also you can install latest version on Angular 2 project as well and it's fully backward compatible.

In case required ( which shouldn't! ), install version 1.6.* for Angular 2, 4, 5 but they won't recieve update.

Live demo



You need to install this repository as dependency and import it to your app.module.ts in imports section.

npm install amazing-time-picker --save

then, open your app.module.ts or other module that you want to use timepicker among, and import and add it to the imports section:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AmazingTimePickerModule } from 'amazing-time-picker'; // this line you need
import { AppComponent } from './app.component';

  declarations: [
  imports: [
    AmazingTimePickerModule // this line you need
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

This helps your angular project to build and compile it and let you use it.

Using in component markup

After you have installed this module, you can use it within your html templates and give the directive to the any tag. When user closes the dialog, it's gonna update the input value and will listen to input click event to open the dialog.

<input atp-time-picker value="19:00"/>

Opening component programmatically

You can also open a timepicker dialog programmatically. In order to open that, you need to import the service in your component:

import { AmazingTimePickerService } from 'amazing-time-picker';

Then add it inside your app.component.ts or any other component that you want to use timepicker inside of that.

import { Component } from '@angular/core';
import { AmazingTimePickerService } from 'amazing-time-picker'; // this line you need

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
export class AppComponent {
  constructor( private atp: AmazingTimePickerService, // this line you need
             ) { }

  open() {
    const amazingTimePicker = this.atp.open();
    amazingTimePicker.afterClose().subscribe(time => {

Online demo

Amazing Time Picker | TimePicker | Materialize time picker | AmazingTimepicker | ClockPicker