angular2-select

Select box input module for Angular2 (2.0.2 FINAL RELEASE) using anuglar2-material (2.0.0-alpha.9-3). Based on official angular2-seed.

See demo plunker.

Dependencies

• Angular2 in version 2.0.2
• @angular/material v2.0.0-alpha.9-3 used elements:
  • core
  • card
  • icon
  • input

Instalation

npm install @baumi/angular2-select --save

Usage

Import module:

import{Angular2SelectModule}from'@baumi/angular2-select';
...
@NgModule({imports: [Angular2SelectModule,
...
],
...
})

Use it in the template:

<bm-ng2-selectplaceholder="Select a country"
(selectionChanged)="onSelectionChange($event);"><bm-ng2-optionvalue="PL">Poland</bm-ng2-option><bm-ng2-optionvalue="US" disabled="true">USA</bm-ng2-option><bm-ng2-optionvalue="DK" selected="true">Denmark</bm-ng2-option><bm-ng2-optionvalue="FR">France</bm-ng2-option></bm-ng2-select>

The <bm-ng2-select> component fully support two-way binding of ngModel, as if it was a normal <input> and can be also used as a formControl element:

exportclassAppComponentimplementsOnInit{privatedemoForm: FormGroup;constructor(){}ngOnInit(){this.demoForm=newFormGroup({person: newFormControl('')});}}

<form[formGroup]="demoForm"><bm-ng2-selectformControlName="person"
placeholder="Select person"
required=true(selectionChanged)="onSelectionChange('Name', $event);"><bm-ng2-optionvalue="ANNA">Anna</bm-ng2-option><bm-ng2-optionvalue="NATALIA">Natalia</bm-ng2-option><bm-ng2-optionvalue="KASIA">Kasia</bm-ng2-option></bm-ng2-select></form><divclass="error" *ngIf="!demoForm.controls.person.valid">
This field is required
</div>

Development

• Clone or fork this repository
• Make sure you have node.js installed version 5+
• Make sure you have NPM installed version 3+
• WINDOWS ONLY run npm install -g webpack webpack-dev-server typings typescript to install global dependencies
• run npm install to install dependencies
• WINDOWS ONLY run npm run typings-install to install typings
• run npm start to fire up dev server
• open browser to http://localhost:5000