RadAutoCompleteTextView doesn't display in iOS simulator



I am following the steps outlined in http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/AutoCompleteTextView/getting-started#references

I have installed the nativescript-ui-autocomplete plugin; added the NativeScriptUIAutoCompleteTextViewModule to the app. I have created the following component:

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

  moduleId: module.id,
  selector: 'app-country-selection',
  templateUrl: './country-selection.component.html',
  styleUrls: ['./country-selection.component.scss']
export class CountrySelectionComponent implements OnInit {

  ngOnInit() { }

  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));


and my Template looks like this:

<GridLayout margin="20" class="page" rows="*, auto">
  <StackLayout row="0">
    <Label class="h2 title" text="Choose Country"></Label>
  <StackLayout row="1">
    <RadAutoCompleteTextView #autocomplete [items]="dataItems" suggestMode="Suggest" displayMode="Tokens">
      <SuggestionView tkAutoCompleteSuggestionView>
        <ng-template tkSuggestionItemTemplate let-item="item">
          <StackLayout orientation="vertical" padding="10">
            <Label [text]="item.text"></Label>

When I run this on the iOS simulator I see only the Label getting displayed. Any ideas as to what is wrong with the RadAutoCompleteTextView usage?


I don’t think the StackLayouts around the Label and AutoCompleteTextView are really required, try removing them.