🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

ng-scroll-picker

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ng-scroll-picker - npm Package Compare versions

Comparing version

to
1.0.1

LICENSE

4

package.json
{
"name": "ng-scroll-picker",
"version": "1.0.0",
"version": "1.0.1",
"peerDependencies": {

@@ -24,3 +24,3 @@ "@angular/common": "^15.0.0",

"author": "Amierul Basyar",
"license": "ISC",
"license": "MIT",
"bugs": {

@@ -27,0 +27,0 @@ "url": "https://github.com/mrmyroll2/NgScrollPicker/issues"

@@ -1,1 +0,104 @@

Base logic inspired from https://github.com/hiyali/ng-data-picker
# NgScrollPicker - Angular Scroll Picker
NgScrollPicker is an Angular package inspired by [ng-data-picker](https://github.com/hiyali/ng-data-picker) that provides a scroll picker component for selecting various options.
You can find a live demo of the NgScrollPicker [here](https://mrmyroll2.github.io/NgScrollPicker/).
## Features
- Scroll picker component for Angular v15+.
- Built upon the basic logic from [ng-data-picker](https://github.com/hiyali/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
1. Import the 'NgScrollPickerModule'into your Angular module:
```ts
import { NgModule } from "@angular/core";
import { NgScrollPickerModule } from "ng-scroll-picker";
@NgModule({
declarations: [
/* ... */
],
imports: [
/* ... */
NgScrollPickerModule,
],
/* ... */
})
export class AppModule {}
```
2. Use the ng-scroll-picker component in your template:
```html
<ng-scroll-picker [data]="data" (change)="change($event)"></ng-scroll-picker>
```
3. Create the necessary properties in your component
```ts
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](https://github.com/mrmyroll2/NgScrollPicker).

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet