https://github.com/margi47/ngx-paged-select
Select component for Angular 4 with scrolling and paging features. Sample project at https://margi47.github.io/ngx-paged-select/
https://github.com/margi47/ngx-paged-select
angular angular2 angular4 dropdown paging scrolling select typescript
Last synced: 10 months ago
JSON representation
Select component for Angular 4 with scrolling and paging features. Sample project at https://margi47.github.io/ngx-paged-select/
- Host: GitHub
- URL: https://github.com/margi47/ngx-paged-select
- Owner: Margi47
- License: mit
- Created: 2017-08-22T12:57:54.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-16T14:22:54.000Z (almost 8 years ago)
- Last Synced: 2025-05-12T17:00:30.842Z (11 months ago)
- Topics: angular, angular2, angular4, dropdown, paging, scrolling, select, typescript
- Language: HTML
- Homepage:
- Size: 22.5 MB
- Stars: 2
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/ngx-paged-select)
[](https://www.npmjs.com/package/ngx-paged-select)
[](https://travis-ci.org/Margi47/ngx-paged-select)
# ngx-paged-select
A simple select component for Angular 4 with scrolling and paging features.
## Installation
To install this library, run:
```bash
$ npm install ngx-paged-select --save
```
## Prerequisites
You will need [ngx-infinite-scroll](https://github.com/orizens/ngx-infinite-scroll)
```bash
$ npm install ngx-infinite-scroll --save
```
and [Bootstrap](https://getbootstrap.com/) styles
```bash
$ npm install bootstrap --save
```
```html
```
## Consuming library
You can import library in any Angular application by running:
```bash
$ npm install ngx-paged-select
```
and then from your Angular `AppModule`:
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import library
import { SelectModule } from 'ngx-paged-select';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Specify library as an import
SelectModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
Once library is imported, you can use it in your Angular application:
```xml
```
```xml
```
## Supported API
### Properties
- options: array - Array of options to select from. If an array consists of complex objects, key property is needed.
- hasMoreOptions: boolean - Set to true, if current page is not the last one.
- key: string - (optional in case of simple types) - Indicates a property of a complex object, that needs to be displayed.
- placeholder: string - (default: "Select") - Text to display, when no element chosen.
- showNum: number - (default: length of first page) - Number of options visible in select window.
- multiple: boolean - (default: false) - Allows to select multiple options.
### Events
- loadData - Fires when new page needed or search input occured. Returns object with **page:number** and **filter:string** properties.
- optionSelected - Fires when option has been selected. Returns the entire option object or an array of option objects in case of *multiple* attribute set to true.
## Development
To generate all `*.js`, `*.d.ts` and `*.metadata.json` files:
```bash
$ npm run build
```
To lint all `*.ts` files:
```bash
$ npm run lint
```
To run example:
```bash
$ npm run playground
```
## License
MIT © [Margarita Liapustina](mailto:Margi47@users.noreply.github.com)