NativeScript dropdown plugin Angular - Error on opening the item - nativescript

Question

I am trying to use the nativescript dropdown plugin in my Nativescript-angular proeject.
I tried to follow the same steps mentioned in the example project that the Author mentioned. But I am getting the following error.
JS: Drop Down opened. System.err: com.tns.NativeScriptException:
System.err: Calling js method getDropDownView failed System.err:
Error: java.lang.NullPointerException System.err:
android.widget.TextView.setTextColor(TextView.java:3147) System.err:
com.tns.Runtime.callJSMethodNative(Native Method) System.err:
com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1084)
System.err: com.tns.Runtime.callJSMethodImpl(Runtime.java:966)
System.err: com.tns.Runtime.callJSMethod(Runtime.java:953)
System.err: com.tns.Runtime.callJSMethod(Runtime.java:937)
System.err: com.tns.Runtime.callJSMethod(Runtime.java:929)
Here is the AppModule. I have imported the Dropdown Module as explained in the example.
#NgModule({
bootstrap: [
AppComponent
],
imports: [
NativeScriptModule,
AppRoutingModule,
NativeScriptCommonModule,
NativeScriptFormsModule,
NativeScriptHttpModule,
DropDownModule
],
declarations: [
AppComponent,
ItemsComponent,
ItemDetailComponent,
CustomerListComponent,
CustomerDetailComponent,
LoginComponent,
HomeComponent,
ProductListComponent,
TestComponentClass
],
providers: [
ItemService
],
schemas: [
NO_ERRORS_SCHEMA
]
})
I have used the same .ts class which is explained in the example.
import { Component, OnInit } from '#angular/core';
import { SelectedIndexChangedEventData,ValueList } from "nativescript-drop-down";
#Component({
selector: "ns-test-c",
moduleId: module.id,
templateUrl: "./test.component.html",
// styleUrls: ["./test.component.css"]
})
export class TestComponentClass implements OnInit{
public selectedIndex: number = null;
public hint = "My Hint";
public items: ValueList<string>;
public cssClass: string = "default";
public ngOnInit() {
this.items = new ValueList<string>();
for ( let loop = 0; loop < 200; loop++ ) {
this.items.push({
value: `I${loop}`,
display: `Item ${loop}`,
});
}
}
public onchange(args: SelectedIndexChangedEventData) {
console.log(`Drop Down selected index changed from ${args.oldIndex} to ${args.newIndex}. New value is "${this.items.getValue(
args.newIndex)}"`);
}
public onopen() {
console.log("Drop Down opened.");
}
public onclose() {
console.log("Drop Down closed.");
}
public changeStyles() {
this.cssClass = "changed-styles";
}
}
package.json: Below are the installed packages.
{
"description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"readme": "NativeScript Application",
"repository": "<fill-your-repository-here>",
"nativescript": {
"id": "org.nativescript.Kiwi",
"tns-android": {
"version": "3.2.0"
}
},
"dependencies": {
"#angular/animations": "~4.2.0",
"#angular/common": "~4.2.0",
"#angular/compiler": "~4.2.0",
"#angular/core": "~4.2.0",
"#angular/forms": "~4.2.0",
"#angular/http": "~4.2.0",
"#angular/platform-browser": "~4.2.0",
"#angular/router": "~4.2.0",
"nativescript-angular": "~4.2.0",
"nativescript-cardview": "^2.0.2",
"nativescript-drop-down": "^3.1.3",
"nativescript-floatingactionbutton": "^3.0.1",
"nativescript-theme-core": "~1.0.2",
"reflect-metadata": "~0.1.8",
"rxjs": "~5.4.2",
"tns-core-modules": "^3.2.0",
"zone.js": "~0.8.2"
},
"devDependencies": {
"babel-traverse": "6.4.5",
"babel-types": "6.4.5",
"babylon": "6.4.5",
"lazy": "1.0.11",
"nativescript-dev-typescript": "~0.5.0",
"typescript": "~2.4.2"
}
}

Answer 1

<DropDown #dd
color="blue" <!- add this in...it work!!!! -->
backroundColor="red" `enter code here`
[items]="items"
[(ngModel)]="selectedIndex"
(selectedIndexChanged)="onchange($event)"
(opened)="onopen()"
(closed)="onclose()"
row="0"
colSpan="2">
</DropDown>