@angular-mdl/select

Select

Installing

npm i --save @angular-mdl/popover @angular-mdl/select

import { MdlSelectModule } from '@angular-mdl/select';

If you need to support IE11 please add https://www.npmjs.com/package/custom-event-polyfill to your polyfills.

Usage example

<mdl-select [(ngModel)]="personId">
    <mdl-option *ngFor="let p of people" [value]="p.id">{{p.name}}</mdl-option>
</mdl-select>

using placeholder

<mdl-select placeholder="Person Name" [(ngModel)]="personId">
    <mdl-option *ngFor="let p of people" [value]="p.id">{{p.name}}</mdl-option>
</mdl-select>

using label with floating label

<mdl-select label="{{personLabel}}" floating-label [(ngModel)]="personId">
    <mdl-option *ngFor="let p of people" [value]="p.id">{{p.name}}</mdl-option>
</mdl-select>

API Summary

mdl-select

Name	Type	Description
[ngModel]	any	Select data binding
[disabled]	boolean	Whether or not the select is disabled
[placeholder]	string	Placeholder text
[label]	string	Label text
[floating-label]	any	If present or true the label will be floating on focus event
[multiple]	boolean	Multiselect mode
[autocomplete]	boolean	Autocomplete mode
(blur)	...	on blur event
(change)	...	on change event

mdl-option

Name	Type	Description
[value]	any	Option value
[disabled]	boolean	Whether or not the option is disabled
<content>	string	Option label