An implementation of material design select element for Angular 2


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
61Oct 12, 2016Aug 24, 2016Minified + gzip package size for @baumi/angular2-select in KB



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.

alt tag



npm install @baumi/angular2-select --save


Import module:

import { Angular2SelectModule } from '@baumi/angular2-select';
    imports: [

Use it in the template:

    placeholder="Select a country"
    <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>

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">
        placeholder="Select person"
        (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>
<div class="error" *ngIf="!demoForm.controls.person.valid">
    This field is required


  • 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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.