How to get the native control in RadSideDrawer with nativescript angular2?

Question

I have a RadSideDrawer and I want to apply a directive to a Control that is in the MainContent of the RadSideDrawer. Here is my Component using a RadSideDrawer.

<RadSideDrawer>
<StackLayout tkDrawerContent class="sideStackLayout">
    <StackLayout class="sideTitleStackLayout" backgroundGradient [gradientColors]="['red','blue']">
        <Image horizontalAlignment="center" class="avatar" src="res://avatar"></Image>
        <Label horizontalAlignment="center" class="name" text="Zeeko"></Label>
        <Label horizontalAlignment="center" class="email" text="1519560753@qq.com"></Label>
    </StackLayout>
    <StackLayout>
        <StackLayout orientation="horizontal">
            <Label [text]="'fa-file-text' | fonticon" class="fa icon"></Label>
            <Label class="side-item-lbl" text="我的简历"></Label>
        </StackLayout>
        <Label class="side-item-lbl" col="2" row="2" text="已投递"></Label>
    </StackLayout>
</StackLayout>
<StackLayout tkMainContent>
    <Button text="OPEN DRAWER" (tap)=openDrawer()></Button>
    <Label text="欢迎来到主页" textWrap="true"></Label>
</StackLayout>

And here is my directive. Directive

Then I got unexpected ElementRef in the Directive's ngOnInit method, whoes nativeElement property is undefined. If you can help me, I'll be very grateful.

Posting pictures of code is not "recommended" and is simply silly lets not mention that it is also kind of a **** move to those trying to help because copy and paste is impossible. I see you are new so have that in mind for the future, there is way to embed code in your questions/answers using the markdown language (documentation here: http://stackoverflow.com/editing-help). — Vladimir Amiorkov, Mar 14 '17 at 15:45
@VladimirAmiorkov thank you for your suggestion, I've updated my question and I'll keep what you said in mind — Tao Zhu, Mar 15 '17 at 02:40

score 0 · Answer 1 · answered Mar 07 '17 at 14:54

You can take a look at the RadSideDrawer sdk angular examples of the nativescript-telerik-ui plugin here.

More specifically you can get the RadSideDrawerComponent in the component code like so:

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import { RadSideDrawerComponent, SideDrawerType } from "nativescript-telerik-ui-pro/sidedrawer/angular";

@Component({
    moduleId: module.id,
    selector: "tk-sidedrawer-getting-started",
    templateUrl: 'getting-started.component.html',
    styleUrls: ['getting-started.component.css']
})
export class SideDrawerGettingStartedComponent implements OnInit {
    constructor() {
    }

    @ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
    private drawer: SideDrawerType;

    ngAfterViewInit() {
        this.drawer = this.drawerComponent.sideDrawer;
    }

    public openDrawer() {
        this.drawer.showDrawer();
    }
}

Copied from here.

I mean I can get the drawer element, but can't get the element in the drawer — Tao Zhu, Mar 13 '17 at 01:11
Rewrite you question then, there is no mention of any content of the side drawer. The RadSideDrawer instance has a **mainContent** and **drawerContent** properties which hold the declared content here is the API documentation (http://docs.telerik.com/devtools/nativescript-ui/api/classes/radsidedrawer.html). — Vladimir Amiorkov, Mar 13 '17 at 20:36

How to get the native control in RadSideDrawer with nativescript angular2?

1 Answers1