md-select
v0.0.1-alpha.1
Published
Angular 2 Material select
Downloads
6
Maintainers
Readme
md-select
Native Angular2 Material Select component
API
Example:
<md-select [(ngModel)]="item" (change)="change($event)" [disabled]="disabled">
<md-option *ngFor="let i of items" [value]="i.value" [disabled]="i.disabled">{{i.name}}</md-option>
</md-select>
...
import { SELECT_DIRECTIVES, MdSelectDispatcher } from 'md/select';
@Component({
selector: "...",
directives: [SELECT_DIRECTIVES],
providers: [MdSelectDispatcher]
})
export class ... {
...
private disabled: boolean = false;
private items: Array<any> =
[
{ name: 'Amsterdam', value: '1', disabled: false },
{ name: 'Birmingham', value: '2', disabled: false },
{ name: 'Dortmund', value: '3', disabled: false },
{ name: 'Gothenburg', value: '4', disabled: true },
{ name: 'London', value: '5', disabled: false },
{ name: 'Seville', value: '6', disabled: false }
];
private item: string = '3';
private change(value: any) {
console.log('Selected value is: ', value);
}
...
}
Properties
ngModel
(any
) - two way data binding. This should be a value of selected option. This option is mutually exclusive with value.placeholder
(?string=''
) - Placeholder text to display when the element has no selected item.disabled
(?boolean=false
) - Whentrue
, it specifies that the component should be disabled or if apply on option then the specific option should be disabled.value
- (any
) - Items that have children of select element it pass any object or string over there, while select the specific option emit value of it.
Events
change
- it fires after a new option selected; returnsvalue
of selected option.