Angular Material Select Component

A component inspired by material design for creating visually nice select components.

Demo

Checkout a live demo at http://www.webpackbin.com/4kAEf9Sub

Install

npm install ng2-material-select --save

API

• placeholder - defines the placeholder when no items are selected
• multiple - defines whether it's possible to select multiple items

Example

1<ng2-select [placeholder]="'Choose your framework'"
2            [options]="options"
3            [(ngModel)]="framework">
4
5</ng2-select>

1// import module
2import { Ng2SelectModule } from 'ng2-material-select';
3
4@NgModule({
5    imports: [ Ng2SelectModule ]
6    // ..
7})
8export class MyModule {}

Advanced Usage using objects

In case you want to use objects instead of simple arrays, you might want to use 3 further options:

• displayBy - defines the key for displaying the value of the item

• ?selectedDisplayBy - optional, defines the key for displaying the value once an item is selected

• ?identifyBy - optional, it is useful in case there is the possibility to have items with duplicate values (ex. two items with the same name). In that case, you can defined another key (ex. id) to correctly identify the item. Also, this allows the component to use trackBy

In addition to that you may listen to a change event to get notified whenever a new option has been selected:

• onChange - optional, fires whenever a new option gets selected

Example

1<ng2-select [placeholder]="'Choose your framework'"
2            [displayBy]="'name'"
3            [selectedDisplayBy]="'label'"
4            [identifyBy]="'name'"
5            [options]="options"
6            [(ngModel)]="framework">
7</ng2-select>

1import { Component } from '@angular/core';
2
3@Component({
4    selector: 'app',
5    template: require('./home.html')
6})
7
8export class App {
9    framework = 'Angular 2';
10    options = [
11        {
12            name: 'Angular2',
13            label: 'ng2',
14            id: 0
15        },
16        {
17            name: 'React',
18            label: 'rx',
19            id: 1
20        }
21    ];
22}

TODO

• Autocomplete dropdown