Why is @ViewChildren zero-length?

Question

I follow these to implement ViewChildren, but am unable to get the children. Why?

@ViewChildren(TextField) inputs: QueryList<TextField>;

ngAfterViewInit(): void {
    console.log('this.inputs.length = ', this.inputs.length);
    // the length is 0
}

DEMO

You can't query TextField, try using template reference variable like `` and in component `@ViewChildren('ref') inputs: QueryList;` — yurzui, Apr 14 '18 at 17:25
[The Angular api](https://angular.io/api/core/ViewChildren) queries component class name `@ViewChildren(Pane) ...`. — Ksthawma, Apr 14 '18 at 17:32
`@ViewChildren(Pane)` is working because `Pane` is class not selector. In link you have shared it's stated under `Metadata Properties` > "selector - the directive type or the name used for querying." — Anshuman Jaiswal, Apr 14 '18 at 17:35
@yurzui - OK, I see. I thought that `TextField` was an Angular component class. If it was, the original code would work, I guess (I hope so because I use `ViewChildren` that way in my own code). Thanks for the explanation. — ConnorsFan, Apr 14 '18 at 17:52

Anshuman Jaiswal · Answer 1 · 2018-04-14T18:12:35.667

2

Add template variable textField (it could be anything) in template as:

<StackLayout class="home-panel">
    <TextField #textField hint="Enter text1..."></TextField>
    <TextField #textField hint="Enter text2..."></TextField>
</StackLayout>

Then this will result as expected:

@ViewChildren('textField') inputs: QueryList<ElementRef>;

edited Apr 14 '18 at 18:12

answered Apr 14 '18 at 17:33

Anshuman Jaiswal

5,352
1
29
46

score 1 · Accepted Answer · answered Apr 14 '18 at 17:46

There is a great answer about what we can query

What are all the valid selectors for ViewChild and ContentChild?

So we can query angular directives that match template element, but there is no directive with TextField selector. TextField is nativescript component not angular.

Query TextValueAccessor

There is only TextValueAccessor directive but in order to query it you should honor its selector:

TextField[ngModel],TextField[formControlName],TextField[formControl],

For example, the following should work:

template

<StackLayout class="home-panel">
    <TextField hint="Enter text1..." ngModel></TextField>
    <TextField hint="Enter text2..." ngModel></TextField>
                                     ^^^^^^^
                                 notice attribute here
</StackLayout>

component.ts

import { TextValueAccessor } from 'nativescript-angular/forms/value-accessors';

...

@ViewChildren(TextValueAccessor) inputs: QueryList<TextField>;

Query ElementRef

Otherwise use template reference variable: