Getting a reference to a component in the template

Question

I would like to get a reference from a component defined in the template. Let's consider I have the following component:

@Component({
    selector: 'a-component'
})
@View({
    template: '<another-component #anotherComponent></another-component>',
    directives: [AnotherComponent]
})
class AComponent {
    
    callAnotherComponent() {
        anotherComponent.doSomething();
    }

}

Obviously, this doesn't work, anotherComponent in my class is not defined. But is there any easy way to do this? In my case, AnotherComponent is supposed to be a popup component and I would like to simply call something like myPopupCmp.showMessage("message").

I could, of course, use data binding and use it like this in my template: <another-component [text]="popupText" [visible]="isPopupVisible"></another-component>, and use these two members to show it by first setting up the text, and then making it visible. In most cases data binding makes sense, but here I would like to encapsulate the attributes and avoid having to take care of the behavior of the popup from where it's being used.

edit:

@EricMartinez I have updated your plnkr after some research, here is a link to the fork : plnkr. The trick is to use @ViewQuery which is used to query directives and dom elements in the View of the Component. I found this in this issue : angular2 github.

Now the problem is that _results seem to come empty, even though I can see my component if I expand the view in the console, and I can even see its properties, so the data is there somehow but I can't access it. Is there a special way of using QueryLists? Using _results doesn't seem very clean as the _ indicates that it should be private or internal. I also tried to use first but it always brings a null reference.

Answer 1

As of https://github.com/angular/angular/commit/b0e2ebda708cf25287a211a30ef63d84cdb92a7f you should be able to do:

class AComponent {
    constructor(@Query('#anotherComponent') query:QueryList<AnotherComponent>) {

    }
}

Answer 2

So, to sum things up, I had to use the decorator @ViewQuery :

class AComponent {

    private _anotherComponentQuery : QueryList<AnotherComponent>;

    constructor(@ViewQuery('anotherComponent') query : QueryList<AnotherComponent>) {
    this._anotherComponentQuery = query;
}

    onInit() {
        for(component of this._anotherComponentQuery){
            //component.instance.callMethod()
        }
    }

}

Two important things to note here, the component returned by the ViewQuery is a ComponentRef here, since in my template it is a component. It would otherwise be an ElementRef I believe in the case of a simple HTML tag. The other thing is that in the constructor of my component, the query is empty as I believe the template has not been parsed yet at this stage. And QueryList is dynamic and will be updated whenever my view changes ( say I add elements that satisfy the query ). So the trick is either to access the query only later, for example in an event handler, or to do it in the onInit which is part of the lifecycle of components. Weirdly enough, if I would define the lifecyle onInit and import onInit, the code would never go through my method onInit(), and it worked fine without importing anything .. go figure !

Answer 3

Please see this Execute method on child component, seems like the same approach as in answer but without iterating through the results of the query, if you know the name of your referenced child component.