Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/taranys/ng-selector
Custom select to replace ng-select component based on selectize.js
https://github.com/taranys/ng-selector
Last synced: 11 days ago
JSON representation
Custom select to replace ng-select component based on selectize.js
- Host: GitHub
- URL: https://github.com/taranys/ng-selector
- Owner: Taranys
- License: mit
- Created: 2016-12-30T10:38:13.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-22T06:36:26.000Z (almost 7 years ago)
- Last Synced: 2024-10-07T15:17:59.352Z (about 1 month ago)
- Language: TypeScript
- Size: 2.68 MB
- Stars: 9
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# ng-selector [](https://travis-ci.org/Taranys/ng-selector)
Custom select to replace ng-select component
Example available on : https://taranys.github.io/ng-selector/
## Instalation
1. Install NgSelector
`npm i ng-selector jquery selectize`
2. Include dependencies into `angular.cli`
```json
"styles": [
"../node_modules/selectize/dist/css/selectize.bootstrap3.css",
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/selectize/dist/js/standalone/selectize.js"
],
```
3. Add NgSelectorModule as dependency
```typescript
import { NgModule } from '@angular/core';
import { NgSelectorModule } from 'ng-selector';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
...,
NgSelectorModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
## API
```html
```
## Usage
Main usage is to let user select an object into an array of object. It is possible to do async data loading and custom rendering.
### Simple selection
```typescript
export class AppComponent {
selected: any;
values = [
{ id: 1, label: 'First value' },
{ id: 2, label: 'Second value' },
{ id: 3, label: 'Another one' },
{ id: 42, label: 'Best value' },
];
}
```
```html
```
### Custom object
```typescript
export class AppComponent {
values = [
{ uid: 1, nameOfObject: 'First value' },
{ uid: 2, nameOfObject: 'Second value' },
{ uid: 3, nameOfObject: 'Another one' },
{ uid: 42, nameOfObject: 'Best value' },
];
selected = this.values[0];
}
```
```html
```
### Multiple selection
```html
```
### Integration with NgForm
```typescript
export class AppComponent {
values = [
{ id: 1, name: 'First value' }, { id: 2, name: 'Second value' },
{ id: 3, name: 'Another one' }, { id: 42, name: 'Best value' },
];
selected = this.values[0];
get disabled() {
return this.formConfirmed;
}
}
```
```html
```
### Async data loading
```typescript
export class AppComponent {
selected: any;
constructor(private http: Http) {}
fetchServer(event) {
this.http.get(`${url}?search=${event.query}`)
.subscribe(response => event.result(response.json()));
}
}
```
```html
```
### Custom rendering
/!\ rendering function has to be sync
```typescript
export class AppComponent {
selected: any;
customRendering(renderer) {
const item = renderer.val;
renderer.html(`${item.id} - ${item.label}`);
}
}
```
```html
```
# Thanks
Thanks to [Generator angular library](https://www.npmjs.com/package/generator-angular2-library) for this awesome generator :)