How to Use nativescript-autocomplete plugin with nativescript angular?

Question

I am not able to make plugin work with angular project template .GitHub shows only code in native and XML .Sample plugin code works but unfortunately no angular support or help given. I am not able show on angular template. relevant code i am using

detail.component.ts

registerElement("AutoComplete", () => require("nativescript-autocomplete").AutoComplete);

public list :Array = ['1','2','3','4','567'] ; 

public itemTapped(args){

console.log("tapped");

}

detail.component.html

<AutoComplete items=""{{list}}"" itemTap="itemTapped($event)"> </AutoComplete>

i am getting exception on console while page loads and autocompletion doesnt work

this.items.forEach is not a function inside plugin code .that line is with definition of AutoComplete.prototype.itemsUpdate inside autocomplete.android.js plugin source

Debugging into plugin source it breaks at initialization time :

'AutoComplete.prototype.itemsUpdate = function (items) {
    var arr = Array.create(java.lang.String, this.items.length);
    this.items.forEach(function (item, index) {
        arr[index] = item;
    });
    var ad = new android.widget.ArrayAdapter(app.android.context, android.R.layout.simple_list_item_1, arr);
    this._android.setAdapter(ad);
};'

You may want to take a look at nativescript-telerik-ui plugin (nativescript.org/ui-for-nativescript). It has a free version and pro version which includes an AutoCompleteTextView like component. Unfortunately it is not supported for Angular yet but it will be in the next release of the plugin. — Vladimir Amiorkov

Habeeb Habeeb · Accepted Answer · 2017-02-27T13:38:58

In detail.component.html

<AutoComplete [items]="list" (itemTap)="itemTapped($event)"> </AutoComplete>

in details.component.ts add

public list:any= ['1','2','3','4','567'] ; 

itemTapped(ev){
//console.log(ev); your code
}

Issue in npm version. Clone the repository.

Replace all the files in node_modules/nativescript-autocomplete ,expect screenshot, demo folders and git related files. And try the solution

How to Use nativescript-autocomplete plugin with nativescript angular?

1 Answers