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.

Answer 2

To get element in your project you should use @ViewChild decorator, which will help you to create new property that point at the SearchBar. In regard to that you could review my project here and also to review this article: Building Apps with NativeScript and Angular 2