ng-scroll-picker

NgScrollPicker - Angular Scroll Picker

NgScrollPicker is an Angular package inspired by ng-data-picker that provides a scroll picker component for selecting various options. You can find a live demo of the NgScrollPicker here.

Features

• Scroll picker component for Angular v15+.
• Built upon the basic logic from ng-data-picker, enhanced and updated to support the latest Angular versions.
• Added wheel listener for smoother and more intuitive scrolling.

Installation

npm install ng-scroll-picker

Usage

• Import the 'NgScrollPickerModule'into your Angular module:

import { NgModule } from "@angular/core";
import { NgScrollPickerModule } from "ng-scroll-picker";

@NgModule({
  declarations: [
    /* ... */
  ],
  imports: [
    /* ... */
    NgScrollPickerModule,
  ],
  /* ... */
})
export class AppModule {}

• Use the ng-scroll-picker component in your template:

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

• Create the necessary properties in your component

import { Component, OnInit } from '@angular/core';
import {
  PickerDataModel,
  PickerValueModel,
  PickerResponseModel,
} from 'ng-scroll-picker';

@Component({
  selector: 'app-basic',
  templateUrl: './basic.component.html',
  styleUrls: ['./basic.component.scss'],
})
export class BasicComponent implements OnInit {
  selectedValue: any;

  data: PickerDataModel[] = [
    {
      textAlign: 'start',
      weight: 9,
      className: undefined,
      onClick: (gIndex: any, iIndex: any, selectedValue: any) => {
        console.log('selectedValue', selectedValue);
      },
      currentIndex: 0,
      list: [],
      divider: false,
      text: 'test',
      groupName: 'test',
    },
  ];

  ngOnInit() {
    const malaysianBanks: PickerValueModel[] = [
      { label: 'Maybank', value: 'MBB' },
      { label: 'CIMB Bank', value: 'CIMB' },
      { label: 'Public Bank', value: 'PBB' },
      { label: 'RHB Bank', value: 'RHB' },
      { label: 'Hong Leong Bank', value: 'HLB' },
      { label: 'AmBank', value: 'AMB' },
      { label: 'Bank Islam Malaysia', value: 'BIMB' },
      { label: 'OCBC Bank', value: 'OCBC' },
      { label: 'HSBC Bank Malaysia', value: 'HSBC' },
      { label: 'Standard Chartered Bank Malaysia', value: 'SCB' },
    ];

    this.data[0].list = malaysianBanks;
    this.selectedValue = this.data[0].list[0].value;
  }

  change(res: PickerResponseModel) {
    this.selectedValue = this.data[res.gIndex].list[res.iIndex].value;
  }
}

Contributing

We welcome contributions from the community. Feel free to submit issues, feature requests, and pull requests on our GitHub repository.