ngx-amazing-time-picker v17.0.1

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);
      });
  }
}