@ngx-tiny/single-select

Angular modern single selection dropdown.

• Angular 10 implementation
• Works with SSR
• Dynamic filtering of items
• Supports Keyboard navigation (arrow, space and enter keys)
• Works alone or with angular forms
• No Dependencies required
• String or Object Array as options
• Themeable to own requirements

Installation

$ npm i @ngx-tiny/single-select

Documentation

Full Docs:

You can find the full documentation at https://aavanzyl.github.io/ngx-tiny which includes

• Installation instructions
• Usage and Demos
• Styling Reference
• API Reference

Quick Start:

1. Install with npm: npm install @ngx-tiny/single-select --save

2. Add NgxSingleSelectModule to your @NgModule like example below

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { NgxSingleSelectModule } from '@ngx-tiny/single-select';
   
   import { AppComponent } from './app.component';
   
   @NgModule({
       imports: [BrowserModule, NgxSingleSelectModule],
       declarations: [AppComponent],
       bootstrap: [AppComponent]
   })
   
   export class AppModule { }

3. Add the component to your view for basic

   <ngx-single-select 
       placeholder="Select a Country" 
       [options]="options" 
       (valueChange)="onChange($event)">
   </ngx-single-select>

   or for Angular forms

   <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
       <ngx-single-select 
           formControlName="country" 
           [options]="options" 
           placeholder="Select a Country" >
       </ngx-single-select>
       <button class="btn" type="submit">Submit</button>
   </form>

   The examples above are quite basic. The picker has much more features and configurations.

Support

Support me by becoming a patron and buying me a beer :)

License

See the LICENSE file.