In NativeScript with Angular, how can I get an interface element the id?

Question

I'm trying to avoid unexpected behavior in a NativeScript application.

When I walk into any screen that has a search field (SearchBar) system puts the focus on the search field automatically.

Then I got help with a friend who gave me a function to solve this problem. But the problem I'm facing right now is that I can not get the interface element. I have the following code:

import {Component} from "@angular/core";
import {Page} from "ui/page";
import frame = require("ui/frame");

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

export class ClientesPage {

    page;

    constructor(private _router: Router) {
        this.page = <Page>frame.topmost().currentPage;
        this.removeSearchFocus();
    }

    removeSearchFocus() {
        var parent = this.page.getViewById('box-lista');
        var searchBar = this.page.getViewById('barra-busca');

        console.log(JSON.stringify(parent)); // UNDEFINED
        console.log(JSON.stringify(searchBar)); // UNDEFINED

        if (parent.android) {
            parent.android.setFocusableInTouchMode(true);
            parent.android.setFocusable(true);
            searchBar.android.clearFocus();
        }

    }
}

And then I have the template:

<Page.actionBar>
    <ActionBar title="Clientes"></ActionBar>
</Page.actionBar>

<StackLayout orientation="vertical" id="box-lista">
    <SearchBar hint="Buscar" cssClass="mh mv" id="barra-busca"></SearchBar>
</StackLayout>

My goal is to get the auto focus of the search field, but I can not get the interface element.

Answer 1

to expand on Nikolay's answer above this to use @ViewChild add #foo to your stack layout so it looks like:

<StackLayout #foo ....

then:

@ViewChild('foo') stackLayout: ElementRef;

ngAfterViewInit() {
    let yourStackLayoutInstance = this.stackLayout.nativeElement;
} 

it won't get the element by ID but this is the more ng2 way of interacting with elements and keeps your code more loosely coupled to the DOM.