Dropdown is not a valid view instance (Angular+Nativescript)

Question

I am trying to create a dropdown in my nativescript angular app by using nativescript dropdown plugin. I am seeing an error "Dropdown(1) is not a valid view instance" when I run the app

import { DropDownModule } from "nativescript-drop-down/angular";

.html file

 <GridLayout rows="auto, auto, auto, *"
                                        columns="auto, *" (tap)="openVersionDropdown()"    >
    
                                <DropDown  #dd  backgroundColor="red" [items]="itemsVersion"
                                          [selectedIndex]="selectedVersionIndex" (opened)="onopen()"
                                           (closed)="onclose()" (selectedIndexChange)="onVersionChange($event)" row="0" colSpan="2"></DropDown>
    
                                <Label text="Selected Index:"
                                       row="1"
                                       col="0"
                                       fontSize="18"
                                       verticalAlignment="bottom"></Label>
                                <Label [text]="selectedVersionIndex"
                                           row="1"
                                           col="1"></Label>

ts file

import {DropDown, SelectedIndexChangedEventData, ValueList} from "nativescript-drop-down";
    .... 
public itemsVersion: ValueList<string>;
selectedVersionIndex : number;

     public onopen() {
            console.log("Drop Down opened.");
        }
    
        public onclose() {
            console.log("Drop Down closed.");
        }
    
        public changeStyles() {
            this.cssClass = "changed-styles";
        }
    
    
        openVersionDropdown(){
            let dropdown = <DropDown>this.page.getViewById('ddVersion');
            dropdown.open();
        }
        onVersionChange(args: SelectedIndexChangedEventData){
            console.log(`Drop Down selected index changed from ${args.oldIndex} to ${args.newIndex}. `);
        }
        ngOnInit(): void {
            this.itemsVersion = new ValueList<string>();
            for (let loop = 0; loop < 5; loop++) {
                this.itemsVersion.push({
                    value: `${loop}` ,
                    display:  "Item "+ loop,
                });
            }
     }

Answer 1

Try to this for add dropdown in application: 1.demo.module.ts:-

 import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { DemoComponent } from "./demo.component";
 import { NativeScriptCommonModule } from "nativescript-angular/common";
 import { NativeScriptFormsModule } from "nativescript-angular/forms";
 import { DropDownModule } from "nativescript-drop-down/angular";

 @NgModule({
  imports: [
    NativeScriptCommonModule,
    NativeScriptFormsModule,
    DropDownModule,
  ],
  declarations: [
    DemoComponent
  ],
  providers: [
  ],
  schemas: [
    NO_ERRORS_SCHEMA
  ]
 })
 export class DemoModule { }

2.demo.component.html:-

<GridLayout row="0" rows="auto" col="0" columns="*,auto"
                                        class="demo-container" ios:style="padding:8">
                                        <DropDown row="0" col="0" #ddlInitial [items]="initialList"
                                            [selectedIndex]="initialSelectedIndex" ios:style="padding:8"
                                            (selectedIndexChanged)="onInitialChange($event)"
                                            hint="Initial"
                                            class="eloha-font-semibold demo-drop-input">
                                        </DropDown>
                                        <Label row="0" col="1" text="&#xf13a;" class="fa set-icon-color"
                                            [ngClass]="{'font-size-lg': !isTablet, 'font-size-lg-tablet': isTablet}"
                                            verticalAlignment="middle" android:style="padding-right: 10"></Label>
                                    </GridLayout>

3.demo.component.ts:-

import { Component, OnInit, NgZone, ChangeDetectorRef, ChangeDetectionStrategy, ViewChild, AfterViewInit, ElementRef } from "@angular/core";
import * as frameModule from "tns-core-modules/ui/frame";
import { isIOS, device } from "tns-core-modules/platform";
import * as  orientation from 'nativescript-orientation';
import { RouterExtensions } from "nativescript-angular/router";
import * as dialogs from "tns-core-modules/ui/dialogs";
import { DeviceType } from "tns-core-modules/ui/enums";
import { ActivatedRoute } from "@angular/router";
import { SelectedIndexChangedEventData, ValueList } from "nativescript-drop-down";
import { DatePipe } from "@angular/common";

@Component({
selector: "Demo",
moduleId: module.id,
templateUrl: "./demo.component.html",
styleUrls: ['./demo.component.css'],
providers: [DatePipe]
})
export class AddFamilyComponent implements OnInit {

public isTablet: boolean = false;

//Value 
public initialList: ValueList<string>;

//Get dropDown selected index
public initialSelectedIndex = 0;

constructor(private zone: NgZone,
    private _ref: ChangeDetectorRef,
    private route: ActivatedRoute,
    private datePipe: DatePipe,
    private routerExtensions: RouterExtensions) {
    this.isIos = isIOS;
    this.pageIndex = "2";
}

ngOnInit(): void {
    orientation.setOrientation("portrait");
    orientation.disableRotation();

}

ngAfterViewInit(): void {
    if (isIOS) {
        const controller = frameModule.topmost().ios.controller;
        // get the view controller navigation item
        const navigationItem = controller.visibleViewController.navigationItem;
        // hide back button
        navigationItem.setHidesBackButtonAnimated(true, false);
    }
}

//Add initial value
getInitialValueList() {
    let initialSource = new ValueList<string>([
        { value: "Mr", display: "Mr" },
        { value: "Mrs", display: "Mrs" },
        { value: "Miss", display: "Miss" }
    ]);
    this.initialList = initialSource;
}

//Change initial selection value
onInitialChange(args: SelectedIndexChangedEventData) {
    let initialValue = this.initialList.getValue(args.newIndex);
}

}

4. demo.component.css:-

.demo-drop-input {
 font-size: 17;
 padding-top: 5;
 padding-left: 5;
 padding-right: 0;
 padding-bottom: 5;
 border-radius: 30;
 background: #fffff;
}