md2-autocomplete
v0.0.1-alpha.0
Published
Angular 2 Material autocomplete
Downloads
4
Maintainers
Readme
md2-autocomplete
Native Angular2 Material Autocomplete component
Installation
npm install --save md2-autocomplete
API
Example:
HTML sample code
<md2-autocomplete [items]="items"
item-text="name"
item-value="value"
[(ngModel)]="item"
(change)="selected($event)"
placeholder="Placeholder Text">
</md2-autocomplete>
TS sample code
//app-module.ts
import {Md2AutocompleteModule} from 'md2-autocomplete/autocomplete';
@NgModule({
imports: [
Md2AutocompleteModule,
],
declarations: [
...
]
})
//component.ts
...
@Component({
selector: "..."
})
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: string = '3';
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 item from list.
Events
change
- it fires after a new option selected; returns object withvalue
andname
properties that describes a new option.