Angular 2 Controls

Common controls for Angular 2. All of the controls use Bootstrap 3 (so you must reference the Bootstrap 3 script/css files in your HTML) and some of them rely on jQuery.

View the demo here

Project Dependencies

"@angular/common": "2.0.0-rc.5"
"@angular/compiler": "2.0.0-rc.5"
"@angular/core": "2.0.0-rc.5"
"@angular/forms": "0.3.0"
"@angular/platform-browser": "2.0.0-rc.5"
"@angular/platform-browser-dynamic": "2.0.0-rc.5"
"core-js": "^2.4.0"
"ng2-bs3-modal": "^0.7.0"
"reflect-metadata": "0.1.3"
"rxjs": "5.0.0-beta.6"
"zone.js": "0.6.12"

Autocomplete

A pure Angular2 self-contained autocomplete (type ahead) component.

More details coming soon!

DataTable

A pure Angular2 component to display dynamic data in a table. The dynamic data is loaded using a function that can retrieve the data from a AJAX call. It supports column sorting and paging.

More details coming soon!

DateTimePicker

An Angular2 wrapper for the Bootstrap DateTimePicker (http://eonasdan.github.io/bootstrap-datetimepicker/). This component is dependent on that library, jquery, & moment.js. The necessary script and css files are included in this package here:

- /lib/bootstrap-datetimepicker
- /lib/moment.min.js

To use this component, copy the above resources into your own lib folder and reference them as follows:

<link rel="stylesheet" href="./lib/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" href="./lib/bootstrap/dist/css/bootstrap.css" />   

<script src="./lib/jquery/dist/jquery.js"></script>
<script src="./lib/moment.min.js"></script>
<script src="./lib/bootstrap/dist/js/bootstrap.js"></script>    
<script src="./lib/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>    

Dialog

This is just a wrapper component for the ng2-bs3-modal NPM package. The wrapper is used in case future versions use a different library for modal dialogs. Any code using the Angular2 Controls package will not have to change.

Multiselect

A pure Angular2 component for a tag-list style multiselect field.

More details coming soon!

Pager

A simple paging component for displaying page number links and previous/next buttons.

More details coming soon!

TabList

A pure Angular2 component using Bootstrap 3 styles for tabs or pill tabs.

More details coming soon!

TreeView

A pure Angular2 component to display a tree list. The tree items are loaded dynamically using a function and can be loaded via AJAX. Tree nodes support custom expand/collapse icons and also optional node icons.

More details coming soon!