An implementation of material design select element for Angular 2


Keywords
angular, angular2, select, selectbox
License
MIT
Install
npm install @baumi/angular2-select@2.2.1

Documentation

angular2-select

Select box input module for Angular2 using Material Design. Based on official angular2-seed.

alt tag

Dependencies

Instalation

npm install @baumi/angular2-select --save

Usage

Import module:

import { Angular2SelectModule } from 'angular2-select/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