Ngx Simple Select

Simple and lightweight, yet customizable select module for Angular.

Demo

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.

npm install @nutrify/ngx-simple-select --save

You might also need to install @angular/cdk:

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:

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:

// ...

export class Component {
  countryID = 'AD';
}

component.html:

<!-- ... -->

<simple-select [(ngModel)]="countryID" placeholder="Country">
    <simple-option value="AF">Afghanistan</simple-option>
    <simple-option value="AL">Albania</simple-option>
    <simple-option value="DZ">Algeria</simple-option>
    <simple-option value="AS">American Samoa</simple-option>
    <simple-option value="AD">Andorra</simple-option>
    <!-- ... -->
</simple-select>

<!-- ... -->

Check out the source code 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.

CSS / SASS

@import '~@nutrify/ngx-simple-select/scss/styles';

Angular

angular-cli.json:

"styles": [
  "styles.css",

  "../node_modules/@nutrify/ngx-simple-select/css/styles.css"
]