TextField.android property not available in ngAfterViewInit() lifecycle hook

[ghost]

@ViewChild("email") email: ElementRef;

ngAfterViewInit() {
        let email = <TextField>this.email.nativeElement;
        console.log("Got Native element:", email.android);
}

// Output is null

[hdeshev]

I tried it in a component loaded as the main app component, and it worked. I don't think we guarantee that android will be available at ngAfterViewInit though. You could have a case where the element is loaded in a detached part of the visual tree, and it gets attached (and gets an android instance) later. In that case you are better off subscribing to the loaded event.

[ghost]

I am not familiar with loaded event. do you mean ngOnInit()? It does not work there also. Actually my use case is like this. I am loading a route. Once the route is loaded, I am displaying a form to the user. The input fields in the form should have hint colors different than default. ngAfterViewInit is the hook where we know that input fields must have been initialized, so we can access the native elements. But in this hook, although the native elements are accessible, the android or ios property is not accessible. In your view, what is the best place to change the hint color when form is being loaded?

[sebastianteres]

I'm on the exact same situation, I'm using the setTextFieldColors function from the Tutorial but I want to change the colors as soon as the view gets rendered.
Can you tell us more about the loaded event or point us to the documentation please?

[ghost]

I had to do a hack using settimeout:
<TextField (loaded)="onLoaded()"></TextField>
And

onLoaded() {
        console.log("loaded");
        setTimeout(() => {
            if (this.search) {
                let searchField = <TextField>this.search.nativeElement;
                console.log("fetched search", searchField.android);
                let hintColor = new Color("#fed136");
                setHintColor({ view: searchField, color: hintColor });
            }
        });
    }

This is working. But not sure if this is correct way.

[hdeshev]

@sebastianteres setTextFieldColors should be perfectly usable in a ngOnIint callback.

@veenatic the loaded event is a weird one at the moment. It is a part of the NativeScript core view infrastructure and is fired whenever a view instance gets added to the visual tree. The problem with it is that views get added to the tree very early by the renderer, and there are cases when that event won't fire since the renderer will attach the handler after the view has been added to the visual tree.

I'll open a separate issue for supporting the loaded event in a consistent manner since it looks pretty convenient to just add a <TextField #searchBox (loaded)="myHandler(searchBox)"> binding and avoid dealing with ViewChild decorators and ElementRef's.

[ghost]

yes, makes sense to use loaded instead of ngOnInit because the nativeElement property itself is not available in ngOnInit.
Thanks for all the help. {N} rocks!!