ndraiman/ngx-amazing-time-picker

NgxAmazingTimePicker

Updated AmazingTimePicker library to work with recent angular versions

---

Install

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

npm install ngx-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 'ngx-amazing-time-picker'; // <===
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AmazingTimePickerModule // <===
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Using in component markup

You can use it within your html templates and add the atp-time-picker directive to the <input> tag. Clicking the input will open the timepicker dialog When the dialog is closed, it'll update the input value.

<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 'ngx-amazing-time-picker';

Then add it inside your app.component.ts or any other component, for example:

import { Component } from '@angular/core';
import { AmazingTimePickerService } from 'ngx-amazing-time-picker'; // <===
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  
  constructor(private atp: AmazingTimePickerService) {} // <===
  
  open() {
    this.atp.open()
      .afterClose()
      .subscribe(value => {
        this.timeForm.setValue(value);
      });
  }
}