Eqwad-combo-box NPM

Eqwad ComboBox

Overview

Eqwad ComboBox is a customizable select box for Angular2.

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>