@ViewChild: access grand-child methods @ViewChild: access grand-child methods angular angular

@ViewChild: access grand-child methods


It can be acheived if you use ViewChild at each level of your nested components, like this way:

// Level 2@Component({selector: 'level2',template: `<div>I am level 2</div>`,})export class Level2 {  getName(){    return "my name is 'TWO'";  }}// Level 1@Component({selector: 'level1',template: `<div>I am level 1<level2></level2></div>`,directives: [Level2]})export class Level1 {  @ViewChild(Level2) level2:Level2;  getName(){    return "my name is 'ONE'";  }  // You need to add additional function that would be called from level 1  calledFromLevel1() {    return this.level2.getName();  }}// Level 0@Component({selector: 'level0',template: `<div>I am level 0<level1></level1></div>`,directives: [Level1,Level2]})export class App {@ViewChild(Level1) level1:Level1;ngAfterViewInit() {  if(this.level1) {    var name1 = this.level1.getName();    var name2 = this.level1.calledFromLevel1();  }  console.log("name1",name1);  console.log("name2",name2);  }}


I don't think this is currently possible.

The ViewQueryMetadata API doc says the following:

Supports the same querying parameters as QueryMetadata, except descendants.

The QueryMetadata API doc has this descendants example:

Configure whether query looks for direct children or all descendants of the querying element, by using the descendants parameter. It is set to false by default.

... code here not shown ...

When querying for items, the first container will see only a and b by default, but with Query(TextDirective, {descendants: true}) it will see c too.