Eqwad ComboBox
Overview
Eqwad ComboBox is a customizable select box for Angular2.
Table of contents
- Examples
- Dependencies
- Download
- Getting started
- Fields
- Methods
- Events
Examples
Examples are here.
Dependencies
- Angular2 (2.0.0-beta.17 or higher).
- Font Awesome (4.5.0 or higher).
Download
Download it using npm:
npm install eqwad-combo-box
Getting started
Follow the steps below to add Eqwad ComboBox to your app. Also check out Eqwad ComboBox Demo for an example of installation.
Include Eqwad ComboBox CSS file in your main app HTML file and configure SystemJS.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/eqwad-combo-box/eqwad-combo-box.css">
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2.js"></script>
<script>
System.config({
packages: {
app: {
format: 'register'
},
'../node_modules/eqwad-combo-box/': {
defaultExtension: 'js'
}
},
map: {
'eqwad-combo-box': '../node_modules/eqwad-combo-box/eqwad-combo-box'
}
});
System.import ('app/app').then(null, console.error.bind(console));
</script>
</head>
</html>
Import it to your app component.
import { Component, ViewChild } from 'angular2/core';
import { EqwadComboBox } from 'eqwad-combo-box';
@Component({
selector: 'app',
templateUrl: 'app.component.html',
directives: [
EqwadComboBox
]
})
export class AppComponent {
fabrics = [
{ name: 'Cotton', id: '1' },
{ name: 'Polyester', id: '2' },
{ name: 'Cotton/Polyester', id: '3' },
{ name: 'Rib Knit', id: '4' }
];
@ViewChild('fabricsComboBox') fabricsComboBox: EqwadComboBox;
constructor() {
select(item: Object) {
// Handle the event.
}
}
}
Declare it in the component's HTML file.
<eq-combo-box #fabricsComboBox
[items]=fabrics
[itemValueField]="'id'"
[itemTextField]="'name'"
[placeholder]="'Select fabric...'"
(onSelect)="select($event)">
</eq-combo-box>