open-index/open-npm huggingface dataset:
npm package: @power4-its/timepicker-angular
Description: ![Example Image | 100x145 ](https://drive.google.com/uc?id=134UAca_4k_2rheEB3rqMNb-zH2-8T4cO)
Latest version: 0.0.5

# TimepickerAngular

![Example Image | 100x145 ](https://drive.google.com/uc?id=134UAca_4k_2rheEB3rqMNb-zH2-8T4cO)

OR

![Example Image | 100x145](https://drive.google.com/uc?id=1Q5sgBMiYY7f_iLQLDB6x4OYq2PAf-6gf)


## Getting started

Install timepicker through npm: 
> npm i @power4-its/timepicker-angular

## Internationalization
Next import the timepicker module into your app's module:
```
import {NgModule} from '@angular/core';
import { TimepickerAngular } from '@power4-its/timepicker-angular';

@NgModule({
  imports: [TimepickerAngular]
})

export class MyModule {}
```

Finally connect the timepicker to an input via a template property:
```
<timepicker-angular></timepicker-angular>
```

### Properties

Timepicker properties are not type selectable

| Name                     | Description         |
|--------------------------|---------------------|
| hoursTitle (string)     | Title for hours     |
| minutesTitle (string)   | Title for minutes   |
| right (boolean)          | Position right      |
| left (boolean)           | Position left       |
| ------------------------ | ------------------- |
<br />

```
<timepicker-angular hoursTitle='Hours' minutesTitle='Mins' [right]="true" 
    (onSelectedHour)="selectedHour($event)" (onSelectedMin)="selectedMin($event)">
</timepicker-angular>
```

onSelectedHour returns the hours and onSelectedMin returns the minutes

or
```
<timepicker-angular hoursTitile='Hours' minutesTitile='Mins' [right]="true"
    (onSelectedTime)="selectedTime($event)">
</timepicker-angular>
```

onSelectedTime returns the full time

<br />
Timepicker properties are type selectable

| Name                     | Description                               |
|--------------------------|-------------------------------------------|
| select (boolean)         | false - off, true - on                    |
| stepMin (string)         | Step for minutes (15, 30), default 5      |
| stepHour (string)        | Step for hours (08-18), default all hours |
| ------------------------ | -------------------                       |
<br />

```
<timepicker-angular [select]='true' stepHour='08-12' stepMin='15' 
    (onSelectedTime)="selectedTime($event)>
</timepicker-angular>
```

onSelectedTime returns the full time