The default styling for select elements isn’t for everyone. Sometimes you might want to control how it looks (to keep it consistent across browsers and devices) or you might want additional functionality that just isn’t supported natively.
Thankfully there’s a heap of great Angular 2 powered plugins out there to simplify the process.
We’re going to run through a selection of plugins you can incorporate into your next project. Some of these plugins are highly configurable with options, methods, and events, while others are simple replacements for select elements for styling and ease of use.
1. ng2-select Dropdown Demo
Native Angular 2 component for Select
2. Angular 2 Dropdown Multiselect Demo
Customizable dropdown multiselect in AngularX, TypeScript with bootstrap css.
3. Angular Select Dropdown with Search Demo
A simple select dropdown AngularJS directive with search functionality.
4. Angular Crazy Select Box Demo
Angular 2 select component with tree items.
5. Angularjs 2 Cascading Dropdown/Select
Cascading dropdown with angularjs is easier than MVC and ASP.Net. In Angularjs ng-change is the best event to hook the function to get the second dropdown list items.
6. Bind Select DropDown List in AngularJS 2
A sample AngularJS 2 application using TypeScript which binds the country list collection to select dropdown list.
7. Angular 2 Custom Forms Control Demo
Custom form controls/inputs are a common pattern in complex front end applications. Its common to want to encapsulate HTML, CSS and accessibility in a component to make it easier to use in forms throughout the application.
8. Angular Mobile UI Dropdown Demo
Mobile Angular UI is an HTML5 mobile UI framework that will let you use Angular Js and Bootstrap 3 for mobile app development.
9. Angular2 Custom Dropdown
These items can be filtered, and the items can be clicked/selected.
10. Angular-UI Multiselect Checkbox Dropdown
This is an Angular-based dropdown that displays checkboxes for multiselection.
Wrapping It All Up
There’s a wide range of choice when it comes to select replacement Angular 1 plugins now.
You’ll need to search through the various libraries I’ve mentioned today and see which one will most closely cater to your needs. For example, if you just want to restyle your select elements, do you really need a library that also offers filtering and remote data binding?
Let us know if you have any other awesome demos we would love to hear!