ng-scroll-picker
Advanced tools
Comparing version
{ | ||
"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" |
105
README.md
@@ -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
183767
2.28%17
6.25%104
5100%