14 Angular 2 Select Dropdown Demos

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

ng2-select Dropdown Demo
ng2-select Dropdown Demo

Native Angular 2 component for Select

Website Code Demo

2. Angular 2 Dropdown Multiselect Demo

Angular 2 Dropdown Multiselect Demo
Angular 2 Dropdown Multiselect Demo

Customizable dropdown multiselect in AngularX, TypeScript with bootstrap css.

Code Demo

3. Angular Select Dropdown with Search Demo

Angular Select Dropdown with Search Demo
Angular Select Dropdown with Search Demo

A simple select dropdown AngularJS directive with search functionality.

Demo

4. Angular Crazy Select Box Demo

Angular Crazy Select Box Demo
Angular Crazy Select Box Demo

Angular 2 select component with tree items.

Code Demo

5. Angularjs 2 Cascading Dropdown/Select

Angularjs 2 Cascading Dropdown-Select
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.

Website Demo

6. Bind Select DropDown List in AngularJS 2

Bind SelectDropDown List in AngularJS2
Bind Select DropDown List in AngularJS 2

A sample AngularJS 2 application using TypeScript which binds the country list collection to select dropdown list.

Article Demo

7. Angular 2 Custom Forms Control Demo

Angular 2 Custom Forms Control Demo
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.

Article Demo

8. Angular Mobile UI Dropdown Demo

Angular Mobile UI Dropdown Demo
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.

Documentation Code Demo

9. Angular2 Custom Dropdown

Angular2 Custom Dropdown
Angular2 Custom Dropdown

These items can be filtered, and the items can be clicked/selected.

Demo

10. Angular-UI Multiselect Checkbox Dropdown

Angular-UI Multiselect Checkbox Dropdown
Angular-UI Multiselect Checkbox Dropdown

This is an Angular-based dropdown that displays checkboxes for multiselection.

Demo

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!

 

Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and love to share what he learns.

Leave a Reply

Your email address will not be published. Required fields are marked *