ng-iot
A visual time picker for angular 2+ projects. You can use this timepicker with Angular 2, 4, 5 and Angular Material. **This project doesn't require angular material or any other dependencies**
Last updated 3 years ago by connexion .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install ng-iot 
SYNC missed versions from official npm registry.

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 and Angular Material. This project doesn't require angular material or any other dependencies

Install

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

npm install ng-iot --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 'ng-iot'; // this line you need
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    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 <input> 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 'ng-iot';

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 'ng-iot'; // this line you need

@Component({
  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 => {
      console.log(time);
    });
  }
}

Online demo

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

https://owsolutions.github.io/ng-iot/

Current Tags

  • 0.0.11                                ...           latest (3 years ago)

9 Versions

  • 0.0.11                                ...           3 years ago
  • 0.0.10                                ...           3 years ago
  • 0.0.9                                ...           3 years ago
  • 0.0.7                                ...           3 years ago
  • 0.0.6                                ...           3 years ago
  • 0.0.5                                ...           3 years ago
  • 0.0.4                                ...           3 years ago
  • 0.0.3                                ...           3 years ago
  • 0.0.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (13)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |