Angular - How to get nested component reference?

Question

I'm using angular 5.2.2 and I'd like to know if it's possible to find a descendant component (nesting depth 2+).

For example:

FirstLevelComponent (Declared in my Application)
SecondLevelComponent (Third party component)
ThirdLevelComponent (Third party component)

FirstLevelComponent Template:

<first-level-component>
   <second-level-component></second-level-component>
</first-level-component>

SecondLevelComponent Template:

<third-level-component></third-level-component>

I'd like to get ThirdLevelComponent instance in the FirstLevelComponent.

I've tried using @ViewChildren and @ContentChildren, but no success. Both returns an empty QueryList.
I can't change SecondLevelComponent code to expose the ThirdLevelComponent because it's a third party component.

This plunker demonstrates what I'm trying to do: https://plnkr.co/edit/9NsYmrsJMJEi0wofQReI?p=preview

EDIT (2018/02/06)

One option could be inheriting SecondLevelComponent for exposing ThirdLevelComponent, but I wouldn't like to use inheritance and it would be limited to just one more depth level.

After some inspecting, I endend up creating a helper that searches for descendants components. It uses ViewContainerRef:

  import * as NgCore from '@angular/core';

@NgCore.Injectable()
export class FindDescendantsService {
    constructor() { }
    private findRecursive(container: any, type: any, results: any[]) {
        if (!container) { return; }
        if ('nodes' in container) {
            container.nodes.forEach(n => {
                if ('componentView' in n && n.componentView) {
                    if (n.componentView.component instanceof type) {
                        results.push(n.componentView.component);
                    }
                    this.findRecursive(n.componentView, type, results);
                    return;
                }

                if ('viewContainer' in n && n.viewContainer && n.viewContainer._embeddedViews && n.viewContainer._embeddedViews.length) {
                    n.viewContainer._embeddedViews.forEach(v => this.findRecursive(v, type, results));
                    return;
                }
            });
        }
    }
    find(vcr: NgCore.ViewContainerRef, type: any) {
        var view = vcr['_view'];
        var results = [];
        this.findRecursive(view, type, results);
        return results;
    }
}

Then in FirstLevelComponent I can do:

ngAfterContentInit(){    
   var thirdLevelInstances = this.findDescendantsService.find(this.viewContainerRef, ThirdLevelComponent);
}

I'm not very comfortable because it uses some private variables that might change names/behaviour in future releases of angular, but this satisfy my goal for now. I'll wait some time to see if a better solution appears, if not, I think this helper might be the answer...

Bunyamin Coskuner · Accepted Answer · 2018-02-05 19:56:07Z

In order to do that, second component should have an instance of third component. E.g.

// First Component
@Component({
    selector: 'first-comp',
    template: `<second-comp></second-comp>`
})
export class FirstComponent {
    @ViewChild(SecondComponent) secondComponent: SecondComponent;

    doSomething() {
         this.secondComponent.thirdComponent.doStuff();
    }
}

// Second Component
@Component({
    selector: 'second-comp',
    template: `<third-comp></third-comp>`
})
export class SecondComponent{
    @ViewChild(ThirdComponent) thirdComponent: ThirdComponent;
}  

// Third Component
@Component({
    selector: 'third-comp',
    template: `<div>Hello World</div>`
})
export class ThirdComponent{
    doStuff() {
       // some logic here
    }
}

However, I would not recommend this method. This creates tightly coupled components which is harder to test as well. You should always pass your data through @Input and @Outputs or some services.

Maxi · Accepted Answer · 2018-02-06 13:16:00Z

1

In angular communication between components is only father/son. If you can't use second-level-component, you could accomplish this by using a service, as is recommended in the docs.

https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

edited Feb 6, 2018 at 13:16

answered Feb 5, 2018 at 19:36

Maxi

613 bronze badges

Comments

Ruokki · Accepted Answer · 2022-08-25 06:30:17Z

1

With angular 13 (Maybe before but i've not tested) you can add an option in @ContentChildren descendants:true

For you example it will look like that


  @ContentChildren(ThirdLevelComponent, {descendants: true})
  thirdLevelComponents : QueryList<ThirdLevelComponent>;

answered Aug 25, 2022 at 6:30

Ruokki

9772 gold badges8 silver badges28 bronze badges

Collectives™ on Stack Overflow

Angular - How to get nested component reference?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related