iOS Style Data Picker For Angular 4+

Description:

An iOS style data selector for AngularJS 4+ that makes it easier to select some data on the touchscreen device, such as time, city, gender, number, product, and much more.

Installation:

# Yarn
$ yarn add ng-data-picker

# NPM
$ npm install ng-data-picker --save

Usage:

Import.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { DataPickerModule } from './data-picker/data-picker.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DataPickerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Set the data.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  data = [
    {
      list: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
      currentIndex: 4
    }
  ]

  change (gIndex, iIndex) {
    console.log(gIndex, iIndex)
  }
}

Code the template.

<ng-data-picker [data]="data" (change)="change"></ng-data-picker>

Preview: