Cannot access ListView element with ViewChild decorator

[tjvantoll]

I’ve been switching my guide over to using the @ViewChild decorator to get references to views within templates, but one weird thing I found is that I can’t use the technique to get a reference to a <ListView> element.

That is, if I use the following syntax:

<ListView #foo ...></ListView>

@ViewChild("foo") foo: ElementRef;

this.foo is undefined. If I move #foo to another element—e.g. <Image #foo>—the reference is resolved as expected.

[NickIliev]

Hi @tjvantoll

I have tested your scenario and I was able to get reference on ListView successfully.(under Android - CLI 1.7.1)
Can you tell me more details on when you are trying to access this.foo in order to recreate the issue.

Here is the sample code I have used

@Component({
   selector: "myapp",
   template: `
    <StackLayout>
        <Image #myImage stretch="none" ></Image>
        <Button text="Tap" (tap)="submit()"></Button>
        <ListView #myFoo ></ListView>
    </StackLayout>
  `
 })

export class AppComponent {

    @ViewChild("myImage") myImageRef: ElementRef;

    @ViewChild("myFoo") myFooRef: ElementRef;

    ngOnInit() {
        // both undefined
        console.log("ngOnInit myFooRef: " + this.myFooRef);
        console.log("ngOnInit myImageRef: " + this.myImageRef);
    }

    ngAfterViewInit() {
        // both [object Object]
        console.log("ngAfterViewInit myFooRef: " + this.myFooRef);
        console.log("ngAfterViewInit myImageRef: " + this.myImageRef);
    }

    submit(){
        // both [object Object]
        console.log("From custom func myFooRef: " + this.myFooRef);
        console.log("From custom func myImageRef: " + this.myImageRef);
    }
}

[vakrilov]

@NickIliev is right. Maybe the problem is that the when you try to access the nativeElement of myFooRef -> you get undefined (for the myImageRef you will get Image).

The explanation: ListView is actually a component . So myFooRef is an instance of the ListViewComponent and it does not have nativeElement property.
There is a private listView property of the component which is the actual NativeScript ListView - we can make the property public but the better options is to eliminate the need to access the NativeScript component directly.
@tjvantoll Can you share what do you need the {N} ListView instance for?

[tjvantoll]

@vakrilov Ah yeah you’re right—I’m looking for nativeElement. I’m trying to animate the opacity of the <ListView> after data loads so that it fades in https://github.com/NativeScript/sample-Groceries/blob/5eaf814f2835e0e128ced518f888dc1be3be2117/app/pages/list/list.component.ts#L32-L35. I’m trying to consistently use @ViewChild in the guide, so I wanted to use the same technique that I used to get references to <Image>, <StackLayout>, and so forth earlier in the guide.

[darmie]

@tjvantoll how did you resolve this?

[vakrilov]

@darmie The ListViewComponent has a nativeView property that is the actual NativeScript list view. You should be able to get a reference to the ListViewComponent with @ViewChild(ListViewComponent) and the access nativeView.