Nativescript-angular: ngOnInit happens too fast

[vjoao]

I'm trying to get the android native element from a @ViewChild element ref like this:

@ViewChild('sb') searchBar: ElementRef;

ngOnInit(): void {
    console.log(this.searchBar.nativeElement); // prints SearchBar
    console.log(this.searchBar.nativeElement.android); // prints undefined
}

tap () {
    console.log(this.searchBar.nativeElement.android); // prints native SearchBar
}

Also tried the ngAfterViewInit() but no luck (same results as the onInit()).
If I hook it to a button tap it works fine and I can get the reference.
I also noted that I see the logs even before the splash screen disappears.

Am I missing something?

[tsonevn]

Hi @vjoao,
On ngAfterViewInit the native instance of the component for android will still not be initialized.
In your case, you could use the component loaded event. when it is fired you could successfully access nativeElement.android.
For example:

HTML

<ActionBar title="My App" class="action-bar">
</ActionBar>
<StackLayout class="page">
    <SearchBar #sb (loaded)="sbloaded()" id="searchBar" hint="Search" text="" class="search-bar"></SearchBar>
</StackLayout>

TypeScript

import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";

import { Item } from "./item";
import { ItemService } from "./item.service";

@Component({
    selector: "ns-items",
    moduleId: module.id,
    templateUrl: "./items.component.html",
})
export class ItemsComponent implements OnInit {
    @ViewChild('sb') searchBar: ElementRef;


    constructor() { }

    sbloaded(){
        console.log("searchbar loaded");
        console.log(this.searchBar.nativeElement.nativeElement);
        console.log(this.searchBar.nativeElement.android);
    }
}

[vjoao]

Cool! That's exactly what I was searching for.
Thanks =)