The documentation for ContentChildren
cleary states, that QueryList
will not fetch anything inside child components. It doesn't state the same for ViewChildren
though, so I am asking myself, if there is something I am doing wrong here.
directive
@Directive({
selector: '.input-group'
})
export class InputGroupDirective {
constructor(private element: ElementRef) {
console.log(element); // <-- produces n results
}
}
parent.component.ts
@ViewChildren( InputGroupDirective ) public inputGroup: QueryList<InputGroupDirective>;
public ngAfterViewInit(): void {
console.log(this.inputGroup); // <- produces empty result
console.log(document.querySelector('.input-group')); // <-produces n results
}
parent.component.html
<child></child>
child.component.html
<second-child></second-child>
second.child.component.html
<div class="input-group"></div>
Basically, what I need to do is to select the first .input-group
in however nested children components. Any ideas?