I am using Telerik UI for NativeScript. However, the drawer behaves very strangely, the TAP gesture on Button works correctly, however, when I add TAP gesture to Label, it will not work.
I add the
(tap)=openDrawer()
on the Label. But when I click the Label, nothing happens.
import { Component, ElementRef, ViewChild, Inject, OnInit, ChangeDetectorRef } from "@angular/core";
import { View } from "ui/core/view";
import { RadSideDrawer } from "nativescript-telerik-ui-pro/sidedrawer";
import { Page } from "ui/page";
import { ActionItem } from "ui/action-bar";
import sideDrawerModule = require('nativescript-telerik-ui-pro/sidedrawer');
import * as ObservableModule from "data/observable";
import { RadSideDrawerComponent, SideDrawerType } from "nativescript-telerik-ui-pro/sidedrawer/angular";
@Component({
moduleId: module.id,
selector: "mp-app",
templateUrl:'./testdrawer.html',
})
export class TestComponent extends ObservableModule.Observable implements OnInit {
public mainContentText: string = "Hello World";
constructor( @Inject(Page) private page: Page, private _changeDetectionRef: ChangeDetectorRef) {
super();
}
@ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
private drawer: SideDrawerType;
ngAfterViewInit() {
this.drawer = this.drawerComponent.sideDrawer;
this._changeDetectionRef.detectChanges();
}
ngOnInit() {
this.set("mainContentText", "SideDrawer for NativeScript can be easily setup in the XML definition of your page by defining main- and drawer-content. The component"
+ " has a default transition and position and also exposes notifications related to changes in its state. Swipe from left to open side drawer.");
}
public openDrawer() {
alert('openDrawer');
this.drawer.showDrawer();
}
public closeDrawer() {
alert('close drawer');
this.drawer.closeDrawer();
}
}<!-- >> angular-sidedrawer-getting-started -->
<RadSideDrawer #drawer>
<template drawerSide>
<StackLayout class="sideStackLayout">
<StackLayout class="sideTitleStackLayout">
<Label text="Navigation Menu"></Label>
</StackLayout>
<StackLayout class="sideStackLayout">
<Label text="Primary" class="sideLabel sideLightGrayLabel"></Label>
<Label text="Social" class="sideLabel"></Label>
<Label text="Promotions" class="sideLabel"></Label>
<Label text="Labels" class="sideLabel sideLightGrayLabel"></Label>
<Label text="Important" class="sideLabel" (tap)=closeDrawer()></Label>
<Label text="Starred" class="sideLabel"></Label>
<Label text="Sent Mail" class="sideLabel"></Label>
<Label text="Drafts" class="sideLabel"></Label>
</StackLayout>
</StackLayout>
</template>
<template drawerMain>
<StackLayout>
<Label [text]="mainContentText" textWrap="true" (tap)=openDrawer() class="drawerContentText"></Label>
<Button text="OPEN DRAWER" (tap)=openDrawer()></Button>
</StackLayout>
</template>
</RadSideDrawer>
<!-- << angular-sidedrawer-getting-started -->
