https://github.com/raphaelm-sudo/ngx-simple-select
Simple and lightweight, yet customizable select module for Angular
https://github.com/raphaelm-sudo/ngx-simple-select
angular dropdown ngx option select
Last synced: about 2 months ago
JSON representation
Simple and lightweight, yet customizable select module for Angular
- Host: GitHub
- URL: https://github.com/raphaelm-sudo/ngx-simple-select
- Owner: raphaelM-sudo
- License: mit
- Created: 2019-10-21T11:58:53.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-05-07T02:03:18.000Z (about 2 years ago)
- Last Synced: 2025-03-09T21:18:52.053Z (3 months ago)
- Topics: angular, dropdown, ngx, option, select
- Language: TypeScript
- Homepage:
- Size: 1.41 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Ngx Simple Select
Simple and lightweight, yet customizable select module for Angular.
[Demo](https://ngx-simple-select.netlify.com/)
The main goal of this module is to be able to style select controls.
Standard HTML select controls sadly can't be styled among all browsers.
This module is fully replicating the behaviour of Chrome regarding select controls with some added features e.g. scrolling overflowing options sideways, left to right and right to left support on all major browsers (even Edge which does not support the dir attribute yet), mobile and tablet representaion of the list, etc.
The usage is almost the same as if you would use regular HTML select and option tags.
It fully supports template driven forms.
You are not restricted to use one Map or Array only, as your data source and can even insert HTML into options while maintaining search functionality.
## Installation
Note: Ngx Simple Select requires Angular 8 or above.
Ngx Simple Select 2.0.0 requires Angular 9.
```sh
npm install @nutrify/ngx-simple-select --save
```
You might also need to install @angular/cdk:
```sh
npm install @angular/cdk --save
```
For styling import @nutrify/ngx-simple-select/scss/styles.scss or @nutrify/ngx-simple-select/css/styles.css
## Usage
**app.module.ts:**
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { SimpleSelectModule } from '@nutrify/ngx-simple-select';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
SimpleSelectModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
**component.ts:**
```typescript
// ...
export class Component {
countryID = 'AD';
}
```
**component.html:**
```html
Afghanistan
Albania
Algeria
American Samoa
Andorra
```
Check out the [source code](https://github.com/raphaelM-sudo/ngx-simple-select/tree/master/src/app) for an example.
#### Select
##### Inputs
| Property | Default | Description |
| ----------- | ------- | ---------------------------------------------------------------------------------------------------------- |
| placeholder | | Optional placeholder string, which gets displayed when no option is selected |
| value | | Value of selected option |
| hoverBorder | `false` | Boolean describing whether or not the border should only render on hover |
| animate | `true` | Boolean describing whether or not the arrow icon should show an animation |
| dir | | Optional direction property describing the content's text orientation. Can be: `'ltr' \| 'rtl' \| 'auto'` |
##### Directives
| Property | Description |
| -------- | -------------------------------------------------- |
| disabled | Sets the disabled attribute for the select element |
| required | Sets the required attribute for the select element |
#### Option
##### Inputs
| Property | Default | Description |
| -------- | ------- | -------------------------------------------------------------------------------------------------------- |
| value | | Value of the option component |
| dir | | Optional direction property describing the option's text orientation. Can be: `'ltr' \| 'rtl' \| 'auto'` |
##### Directives
| Property | Description |
| -------- | -------------------------------------------------- |
| disabled | Sets the disabled attribute for the option element |
## Styling
You can use SCSS or CSS for styling.
Just import the stylesheet and apply changes to it.
The SCSS stylesheet is recommended since it exports more variables.
If you are not using SCSS for your Angular projects already, you really should.
[The migration is very easy.](https://medium.com/@ngubanethabo.ambrose/migrate-from-css-to-scss-stylesheets-for-existing-angular-application-d61f8061f5b7)
### CSS / SASS
```scss
@import '~@nutrify/ngx-simple-select/scss/styles';
```
### Angular
**angular-cli.json:**
```json
"styles": [
"styles.css",
"../node_modules/@nutrify/ngx-simple-select/css/styles.css"
]
```