Nativescript. Angular2 + Typescript. Add Child to WrapLayout

Question

I can't add child to my WrapLayout. Here is my choose_time.html:

<WrapLayout #wrapLayout>
</WrapLayout>

Here is my choose_time.component.ts:

import { Component, ElementRef, ViewChild } from "@angular/core";
import { WrapLayout } from 'ui/layouts/wrap-layout'
import labelModule = require("ui/label");

@Component({
    selector: "choose_time",
    providers: [],
    templateUrl: "pages/choose_time/choose_time.html",
    styleUrls: ["pages/choose_time/choose_time-common.css"]
})

export class ChooseTimeComponent implements OnInit {
@ViewChild("wrapLayout") wrapLayout: ElementRef;

    constructor(
    private page: Page) {}

    ngOnInit() {
        this.page.actionBarHidden = true;
        this.setChildren()
    }

    setChildren(){
        var label = new labelModule.Label();
        label.text = "text";
        this.wrapLayout.addChild(label)
    }

What am I doing wrong?

Answer 1

When using a TypeScript aware editor and TS support has been configured correctly you'll see an error at the last line of your code.

Change it to (<WrapLayout>this.wrapLayout.nativeElement).addChild(label); and it works like a boss! The key here is adding .nativeElement.