md-multiselect
v0.0.1-alpha.1
Published
Angular 2 Material multiselect
Downloads
25
Maintainers
Readme
md-multiselect
Native Angular2 Material Multiselect component
API
Example:
<md-multiselect [items]="items"
item-text="name"
item-value="value"
[(ngModel)]="item"
(change)="selected($event)"
placeholder="Placeholder Text">
</md-multiselect>
...
import {MdMultiselect} from 'md/multiselect';
@Component({
selector: "...",
directives: [MdMultiselect]
})
export class ... {
...
private items: Array<any> =
[
{ name: 'Amsterdam', value: '1' },
{ name: 'Birmingham', value: '2' },
{ name: 'Dortmund', value: '3' },
{ name: 'Gothenburg', value: '4' },
{ name: 'London', value: '5' },
{ name: 'Seville', value: '6' }
];
private item: Array<string> = ['3', '4'];
private selected(value: any) {
console.log('Selected value is: ', value);
}
...
}
Properties
items
- (Array<any>
) - Array of items from which to select. Should be an array of objects withvalue
andtext
properties. As convenience, you may also pass an array of strings, in which case the same string is used for both the VALUE and the text. Items may be nested by adding achildren
property to any item, whose value should be another array of items. Items that have children may omit having an ID. Ifitems
are specified, all items are expected to be available locally and all selection operations operate on this local array only. If omitted, items are not available locally, and thequery
option should be provided to fetch data.ngModel
(?Array<any>
) - two way data binding. This should be an array with single string or object ofvalue
andtext
properties in the case of input type 'Single', or an array of such objects otherwise. This option is mutually exclusive with value.placeholder
(?string=''
) - Placeholder text to display when the element has no focus and selected items.disabled
(?boolean=false
) - Whentrue
, it specifies that the component should be disabled.item-text
(?string='text'
) - When items array is different with object properties then map 'text' property with the array.item-value
(?string=''
) - Map items array with object to return 'value' and update 'ngModel' object with the value property, ifitem-value
isnull
then it return 'value' as whole object of selected items from list.
Events
change
- it fires after a new option selected; returns object withvalue
andtext
properties that describes a new option.