angular-selector-on-steroids is a native AngularJS (1.6.x) directive that transforms a simple
<select> html tag into a full html select with typeahead/ autocompletion.
This component is a shameless upgrade to the angular-selector directive, which has been booted up with steroids to circumvent the limitations faced by with the older implementation, such as bad-performance, too many digest cycles and unnecessary watchers.
Why was there a need to upgrade?
The angular-selector although a well authored component, does not cater to large data-sets in terms of both limiting the amount of repeated processes/ iterations/ functions, and did not embrace better rendering and updating logic. Eventually it relied heavily on AngularJs two way data-binding which drove the performance to a stand-still for even a data-set with 1000 items. This created huge memory bloat and lag in the UI. It was time to upgrade the component.
What has been done as a part of upgrade?
- Moved to Typescript, obvious reason being better typing and to expose interface of the component to the real consumers. (Previously just js soup).
- Better abstraction and separation of concerns. (Previously non-modular code.)
- Moved the build/ bundling to webpack, to allow for tree-shaking and packaged as UMD to allow imports. (Previously inline scripts).
- Re-authored in es6, keeping up with better coding standards (Previously es5).
- Every directive is a class, embracing OOP (Previously functional).
- Data marshalling via RxJs, better pub-sub model of communication with in the modules (Previously callback pattern).
- Rendering of html, moved from being dependent on angular DOM manipulation to Virtual dom's diff and patch mechanism, using virtual-dom and hyperx libraries. This provided significant performance boost in rendering. (Previously ng-x repeats and ng-x dom manipulators).
- Just AngularJS!
- Other dependencies are bundled into the UMD module.
- The feature set remains the same as the forked component, please refer original documentation here.
- The extra added feature is called steroids. To enable better rendering and performance boost, set steroids=true in the configuration object.
- 100% fallback (reverse compatible) to orignial component logic, by setting a boolean values steroids=false the older way of rendering and non-performance component can be used.
- As the template generation & DOM Manipulation logic was moved virtual-dom and hyperx the current generated template abides by label & value attribute passed for binding interpolation.
- For any complex dropdown or view item template a JSON structure of the object is shown. Kindly fallback to non-steroids version steroids=false if you need custom and complex template logic.
- I have extended the example to a comparitive example of previous (steroids=false) vs new (steroids=true) implementation, to highlight difference in performance. // TODO: Check example link
- An interactive version of all examples is accesible here https://jkodu.github.io/angular-selector-on-steroids
npm install --save angular-selector-on-steroids
import * as sos from '../dist/angular-selector-on-steroids'; new sos.AngularSelectorOnSteroids().init(); const app = angular.module('MyApp', ['selectorOnSteroids']);
<select selector-on-steroids steroids="true" model="selectedObj" options="arrayOfOptions" value-attr="code" > </select>
||Enable/disable the get performance boost in rendering and data marshalling.|
||Enable/disable pending request cancellation, on new XHR requests.|
||Two-way binding property that models the
||Input name attribute.|
||Enable/disable the select. Note the name is
||Enable/disable the search input field.|
||Sets required validation. Note the name is
||Allows to select more than one value. Note the name is
||Maximum number of selectable items when
||Optional placeholder text to display if input is empty.|
||Set of options to display.
Each object must contain a
||Name of the value key in options array. This also sets the type of result for the model: if you don't set this attribute (
||Name of the label key in options array.|
||Name of the
||Debounce model update value in milliseconds.|
||Two-way bindable attribute to set Right-To-Left text direction.|
||This object is equipped with the methods for interacting with the selector. Check out the "APIs" example.|
||Allows users to type the label of their own options and push them into the list. You can pass a function that returns the full format of the option, using
||Callback fired every time the selected values change. It provides two parameters:
|You can use remote data fetching with the native
|This should be used to perform validation after a "manual" update of the model. It has the same structure of the
||Two-way bindable attribute to show the remove button (cross icon).|
||Close dropdown after selecting an item.|
||Template URL for the selected item(s).|
||Template URL for each item in the dropdown list.|
||Template URL for the dropdown element for the new items.|
||Template URL for each group (header) in the dropdown list.|
Roadmap & Why there is no need to PR to original project
- The plan is to abstract the selector logic to pure Js and provide a bolt-on AngularJs and Angular component.
- PR's are welcome.
- Please raise issues if any.
Licensed under the MIT license.
- npm install
- npm run build-prod - generates a dist directory ready for publishing.
- npm run build - generates the demo/dist directory for local development (no watch).
- npm run dev - builds and watches both source and sandbox directory for local development.
- npm run serve - boots up a http-server and serves the demo directory.