1

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?

pop
  • 3,464
  • 3
  • 26
  • 43

0 Answers0