Help guide the NativeScript roadmap! Participate in the community survey. 📝

NativeScript Angular

RadAutoCompleteTextView Getting Started

In this article, you will learn how to initialize RadAutoCompleteTextView and use it with it's basic configuration inside an NativeScript + Angular applications.


Run the following command to add the plugin to your application:

tns plugin add nativescript-ui-autocomplete


Before proceeding, make sure that the NativeScriptUIAutoCompleteTextViewModule from the nativescript-ui-autocomplete plugin has been imported in an ngModule in your app as explained here.

To create a functional RadAutoCompleteTextView you should:

  • Place the RadAutoCompleteTextView tag in your component's HTML
  • Once you have added it next you should specify the value for the items property. That property defines the collection of TokenModel objects which will be used to provide suggestions on user input. The TokenModel object is a data model used by the autocomplete to populate the suggestion view and the chosen items. Simply create a list of such objects in your component's code and bind it to the items property.
  • Next you would like to specify the the suggestion list of the RadAutoCompleteTextView by adding an SuggestionView between the RadAutoCompleteTextView tags and setting the tkAutoCompleteSuggestionView inline directive to it.
  • All that is left is to specify the template of the of the SuggestionView by adding an default Angular template structural directive between the SuggestionView tags. In order to attach that template to the RadAutoCompleteTextView simply add the tkSuggestionItemTemplate inline directive to the ng-template.

import { Component, ViewChild } from "@angular/core";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { TokenModel, AutoCompleteCompletionMode, AutoCompleteDisplayMode, AutoCompleteSuggestMode } from "nativescript-ui-autocomplete";
import { RadAutoCompleteTextViewComponent } from "nativescript-ui-autocomplete/angular";

    selector: "tk-autocomplete-getting-started",
    templateUrl: "autocomplete-getting-started.component.html"
export class AutoCompleteGettingStartedComponent {
    private _items: ObservableArray<TokenModel>;
    private countries = ["Australia", "Albania", "Austria", "Argentina", "Maldives", "Bulgaria", "Belgium", "Cyprus", "Italy", "Japan",
        "Denmark", "Finland", "France", "Germany", "Greece", "Hungary", "Ireland",
        "Latvia", "Luxembourg", "Macedonia", "Moldova", "Monaco", "Netherlands", "Norway",
        "Poland", "Romania", "Russia", "Sweden", "Slovenia", "Slovakia", "Turkey", "Ukraine",
        "Vatican City", "Chad", "China", "Chile"];

    constructor() {

    @ViewChild("autocomplete") autocomplete: RadAutoCompleteTextViewComponent;

    get dataItems(): ObservableArray<TokenModel> {
        return this._items;

    private initDataItems() {
        this._items = new ObservableArray<TokenModel>();

        for (let i = 0; i < this.countries.length; i++) {
            this._items.push(new TokenModel(this.countries[i], undefined));

The suggestionViewHeight property allows you to have control over the height of the suggestion view. The hint property allows you to provide a text that will be displayed when there is no input. The text property allows you to change the autocomplete text or get the current user input.


Want to see this scenario in action? Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.