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-select
    placeholder="Select a country"
    (selectionChanged)="onSelectionChange($event);">
    <bm-ng2-option value="PL">Poland</bm-ng2-option>
    <bm-ng2-option value="US" disabled="true">USA</bm-ng2-option>
    <bm-ng2-option value="DK" selected="true">Denmark</bm-ng2-option>
    <bm-ng2-option value="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:

export class AppComponent implements OnInit {
    private demoForm: FormGroup;

    constructor() {}
    ngOnInit() {
        this.demoForm = new FormGroup({
            person: new FormControl('')
        });
    }
}

<form [formGroup]="demoForm">
    <bm-ng2-select
        formControlName="person"
        placeholder="Select person"
        required=true
        (selectionChanged)="onSelectionChange('Name', $event);">
        <bm-ng2-option value="ANNA">Anna</bm-ng2-option>
        <bm-ng2-option value="NATALIA">Natalia</bm-ng2-option>
        <bm-ng2-option value="KASIA">Kasia</bm-ng2-option>
    </bm-ng2-select>
</form>
<div class="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