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
– Vladimir Amiorkov, Commented Feb 28, 2017 at 6:48

Habeeb · Accepted Answer · 2017-02-28 07:35:30Z

0

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

edited Feb 28, 2017 at 7:35

answered Feb 27, 2017 at 13:38

Habeeb

1,04016 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Sadiq Over a year ago

i forgot to mention event code in question .I have updated question .This exception raises silently on console while page loads.Its not issue with event.Something wrong from initialization part of plugin itself.

Habeeb Over a year ago

did you applied my changes?

Habeeb Over a year ago

Just replace detail.component.html

Sadiq Over a year ago

event code was there before.I just replaced binding syntax as you mentioned .But now error message changed to Cannot read property 'setAdapter' of undefined

Habeeb Over a year ago

@Sadiq. Updated the answer

|

Collectives™ on Stack Overflow

How to Use nativescript-autocomplete plugin with nativescript angular?

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related