Hi there people!
I'm experimenting an issue with this package and my Nativescript application with Angular2 and Typescript.
When I run the application and I tap the button that should call my sidedrawer, I get the next Unhandled error:
com.tns.NativeScriptException:
Calling js method onClick failed
Error: Error in app.component.html:26:35 caused by: self.context.openDrawer is not a function
The full error log will be at the end of the post, but this is the part of the log I consider relevant to fix this issue.
My main.ts has the next imports and declarations:
import { platformNativeScriptDynamic, NativeScriptModule } from "nativescript-angular/platform";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import drawerModule = require("nativescript-telerik-ui/sidedrawer");
import { SIDEDRAWER_DIRECTIVES } from "nativescript-telerik-ui/sidedrawer/angular";
@NgModule({
declarations: [AppComponent, SIDEDRAWER_DIRECTIVES],
bootstrap: [AppComponent],
imports: [NativeScriptModule],
})
My app.component.html has the button that executes the problematic function:
<StackLayout tkMainContent>
<Label [text]="mainContentText" textWrap="true" class="drawerContentText"></Label>
<Button text="OPEN DRAWER" (tap)=openDrawer()></Button>
</StackLayout>
This is my AppComponent class inside my app.component.ts
export class AppComponent {
public counter: number = 16;
public get message(): string {
if (this.counter > 0) {
return this.counter + " taps left";
} else {
return "Hoorraaay! \nYou are ready to start building!";
}
}
public onTap() {
this.counter--;
}
@ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
private drawer: SideDrawerType;
public openDrawer() {
this.drawer.showDrawer();
}
}
In this case, the tag Button has a (tap) property that executes openDrawer(), a function from the sidedrawer directives.
This is the documentation I was following in the matter:
This is the full error log in case I forgot to mention something else:
com.tns.NativeScriptException:
Calling js method onClick failed
Error: Error in app.component.html:26:35 caused by: self.context.openDrawer is not a function
File: "/data/data/org.nativescript.nbapp/files/app/tns_modules/@angular/core/bundles/core.umd.js, line: 9668, column: 20
StackTrace:
Frame: function:'DebugAppView._rethrowWithContext', file:'/data/data/org.nativescript.nbapp/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 9668, column: 21
Frame: function:'', file:'/data/data/org.nativescript.nbapp/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 9681, column: 27
Frame: function:'', file:'/data/data/org.nativescript.nbapp/files/app/tns_modules/nativescript-angular/renderer.js', line: 221, column: 26
Frame: function:'ZoneDelegate.invoke', file:'/data/data/org.nativescript.nbapp/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js', line: 190, column: 28
Frame: function:'NgZoneImpl.inner.inner.fork.onInvoke', file:'/data/data/org.nativescript.nbapp/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 6220, column: 41
Frame: function:'ZoneDelegate.invoke', file:'/data/data/org.nativescript.nbapp/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js', line: 189, column: 34
Frame: function:'Zone.run', file:'/data/data/org.nativescript.nbapp/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js', line: 83, column: 43
Frame: function:'NgZoneImpl.runInner', file:'/data/data/org.nativescript.nbapp/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 6247, column: 75
Frame: function:'NgZone.run', file:'/data/data/org.nativescript.nbapp/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 6477, column: 70
Frame: function:'zonedCallback', file:'/data/data/org.nativescript.nbapp/files/app/tns_modules/nativescript-angular/renderer.js', line: 220, column: 24
Frame: function:'Observable.notify', file:'/data/data/org.nativescript.nbapp/files/app/tns_modules/data/observable/observable.js', line: 149, column: 23
Frame: function:'Observable._emit', file:'/data/data/org.nativescript.nbapp/files/app/tns_modules/data/observable/observable.js', line: 168, column: 18
Frame: function:'_android.setOnClickListener.android.view.View.OnClickListener.onClick', file:'/data/data/org.nativescript.nbapp/files/app/tns_modules/ui/button/button.js', line: 33, column: 32
at com.tns.Runtime.callJSMethodNative(Native Method)
at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:865)
at com.tns.Runtime.callJSMethodImpl(Runtime.java:730)
at com.tns.Runtime.callJSMethod(Runtime.java:716)
at com.tns.Runtime.callJSMethod(Runtime.java:697)
at com.tns.Runtime.callJSMethod(Runtime.java:687)
at com.tns.gen.android.view.View_OnClickListener.onClick(android.view.View$OnClickListener.java)
at android.view.View.performClick(View.java:4764)
at android.view.View$PerformClick.run(View.java:19844)
at android.os.Handler.handleCallback(Handler.java:739)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:135)
at android.app.ActivityThread.main(ActivityThread.java:5297)
at java.lang.reflect.Method.invoke(Native Method)
at java.lang.reflect.Method.invoke(Method.java:372)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:908)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:703)
Thanks a lot in advance, I hope you could help me and please, please, tell me if you need me to provide some additional information on the issue.
