Is there any way in angular 6 to get ViewChildren deep?

Question

is there any way to get the children from a subcomponent?

Imagine the following component tree:

• App
  • Question
    • Question Option (contains a checkbox)
    • Question Option (contains a checkbox)
    • Question Option (contains a checkbox)

I want to access Question Option from App to check all checkboxes.

See https://stackblitz.com/edit/angular-ghvsuu for an example.

Answer 1

You can do it in different way though.

Add @ViewChildren(QuestionOptionComponent) options in QuestionComponent instead of AppComponent

And in AppComponent

export class AppComponent  {

  @ViewChild(QuestionComponent) question

  constructor(private elementRef: ElementRef) {}

  checkAll() {
    console.log("this.question", this.question) // found
    console.log("this.options", this.question.options) // found

  }
}

Forked DEMO