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.

Please ignore the "private _router: Router" inside the constructor. — Jean Carlos
– Jean Carlos, Commented Jun 17, 2016 at 14:41

JoshSommer · Accepted Answer · 2016-06-17 14:51:21Z

11

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.

answered Jun 17, 2016 at 14:51

JoshSommer

2,60820 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

krv Over a year ago

I asked a similar question [here] (stackoverflow.com/questions/41809113/…) can u answer that

Nikolay Tsonev · Accepted Answer · 2016-06-17 14:41:06Z

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

answered Jun 17, 2016 at 14:41

Nikolay Tsonev

1,9193 gold badges18 silver badges29 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related