@ngx-dummy/select-simple
Version:
A simple select component to use in Angular / Ionic projects .. (WIP) and sample app using it
215 lines (139 loc) • 10.9 kB
Markdown
<center>
<a href="https://www.npmjs.com/package/@ngx-dummy/select-simple" target="_blank">
<p align="center">
<img src="https://avatars3.githubusercontent.com/u/62136587?s=400&u=4580be0183d1496d982253d3a0d803de82465626&v=4" width="200" height="200" />
</p>
</a>
<h2 align="center"><b style="color: teal;"><a href="https://www.npmjs.com/package/@ngx-dummy/select-simple" target="_blank">@Ngx-dummy/Select-simple</a></b> <i>library</i></h2>
<br />
[](https://www.npmjs.com/package/@ngx-dummy/select-simple)
</center>
---
[](https://github.com/ngx-dummy/select-simple/blob/main/LICENSE)
[](https://github.com/ngx-dummy/select-simple/issues)
[](https://github.com/ngx-dummy/select-simple/network)
[](https://github.com/ngx-dummy/select-simple/stargazers)
[](https://github.com/ngx-dummy/select-simple/releases)
[](https://github.com/ngx-dummy/select-simple/branches)
[](https://github.com/ngx-dummy/select-simple/tags)
[](https://github.com/ngx-dummy/select-simple/issues)
[](https://github.com/ngx-dummy/select-simple/network/members)
[](https://github.com/ngx-dummy/select-simple/network/members)
[](https://bundlephobia.com/package/@ngx-dummy/select-simple)
[](https://bundlephobia.com/package/@ngx-dummy/select-simple)
[](https://bundlephobia.com/package/@ngx-dummy/select-simple)
[](https://www.npmjs.com/package/@ngx-dummy/select-simple)
[](https://www.npmjs.com/package/@ngx-dummy/select-simple)
[](https://www.jsdelivr.com/package/npm/@ngx-dummy/select-simple)
[](https://twitter.com/OvsyukovV)
[](https://paypal.me/ovsyukov)
---
[](https://github.com/ngx-dummy/select-simple/actions/workflows/npm-deploy.yml)
## Features
This is an "Angular version" of html [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) (which could hardly be styled / templated ... hence the library)
- :gear: **Completely customizable:** you can change the colors, styles ...
- :pencil2: **Create your own templates:** create your own Options' templates
- :ok_hand: **You can use right away:** there are basic items styles included
- :rocket: **No extra deps:** depends only on `@angular/core / @angular/common`
- :satellite: **Options' Elements object bindings** data-bind `Option`s to **_string_** of complex objects
<br/>
## Install
### Yarn
```bash
yarn add @ngx-dummy/select-simple
```
<details closed>
<summary>With Npm</summary>
```bash
npm install -save @ngx-dummy/select-simple@0.0.5-v9
```
</details>
<br/>
## Usage
### See the sample app setup [Stackblitz](https://stackblitz.com/edit/ngx-dummyselect-simple-tester?file=src/app/app.component.html)
[](https://stackblitz.com/edit/ngx-dummyselect-simple-tester?file=src/app/app.component.html)
<br />
### samples
```ts
import { SelectSimpleModule } from '@ngx-dummy/select-simple';
@NgModule({
imports: [SelectSimpleModule],
})
export class AppModule {}
```
#### with `Options` (Array of Strings) binding:
```html
<ngxd-select id="select1" [options]="options" [readonly]="false" [required]="true" [resetBtn]="true" formControlName="selector" placeholder="Select a City"></ngxd-select>
```
```ts
//... options as simple strings
options = ['opt1', 'opt2', 'opt2'];
//...
```
<br />
#### with `Options` (Array of Objects) and `optionLabelKey` (for resolving every options' caption) binding:
```html
<ngxd-select id="select1" [options]="options" [readonly]="false" [required]="true" [resetBtn]="true" formControlName="selector" placeholder="Select a City" optionLabelKey="name"></ngxd-select>
```
```ts
//... Select-items's Captions resolved by `optionLabelKey` param (could be simple name of property key or, in case of nested property, dot-separated, ie, `value.para1` )
options = [{ name: 'opt1' , value: { param1: 'para1', param2: 'para2' } }, { name: 'opt2' , value: { param1: 'para1', param2: 'para2' } },];
//...
```
<br />
#### and `Option` are projected (content projection \ transclusion):
```html
<ngxd-select id="select1" [options]="options" [readonly]="false" [required]="true" [resetBtn]="true" formControlName="selector" placeholder="Select a City" optionLabelKey="name">
<ngxd-select-item [label]="'Option 1'" [option]="'Opt1'" (onClick)="selected = $event"></ngxd-select-item>
<ngxd-select-item [label]="'Option 2'" [option]="'Opt2'" (onClick)="selected = $event"></ngxd-select-item>
</ngxd-select>
```
```ts
//...
selected = undefined;
//...
```
<br />
<details>
<summary>More detailed showcase (the video clip demonstrates most of use cases of the library)</summary>
<center>
[](https://vimeo.com/579375725/749b80e96c)
</center>
</details>
<br/>
<br />
<br />
---
<br />
<br />
## Versioning
supports Angular 11 - 13.
<details>
<summary>-*v9</summary>
`@ngx-dummy/select-simple` versioned `*-v9` supports Angular 9 - 11.
</details>
<br />
## Browser Support
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| last 2 versions | last 2 versions | Edge versions | last 2 versions | last 2 versions |
<br />
## To support my work, maybe ..👏 🍭 :
<a href="https://www.buymeacoffee.com/vovan_super" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-green.png" alt="Buy Me A Coffee" height="40" width="140" style="border-radius: 5px;"></a>
<br/>
---
<br/>
<details closed>
<summary>Other projects:</summary>
| Name | URL |
| :-----------: | :----------------------------------------: |
| **Accordion Simple** | *https://www.npmjs.com/package/@ngx-dummy/accordion-simple* |
</details>
<br/>
---
<br />
#### Usage
Licensed under
[](https://github.com/ngx-dummy/select-simple/blob/main/LICENSE)
Licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
\_Copyright (c) belongs to Vladimir Ovsyukov <<ovsyukov@yandex.com>>