rob rob - 3 months ago 12
TypeScript Question

How to access a child component class from the parent component class in Angular2

In Angular 2 how do you access a child component class from the parent component class? e.g.

import {Component, View} from 'angular2/core';

@Component({selector: 'child'})
@View({template: `...`})
class Child {
doSomething() {

@Component({selector: 'parent'})
directives: [Child],
template: `<child></child>`
class Parent {
constructor() {
//TODO: call child.doSomething() when the child component is ready

In this example how would I call the
method from either the
component's constructor or some callback function.


It's quite simple but you have to keep a few points in mind which I'll detail below, first the code.

To reference your children, in this case you want your children within your View, so you must use @ViewChildren and you must wait the view to be initialized so you do

    selector: 'hello',
    template: `<child></child>`,
    directives : [Child]
export class Parent implements AfterViewInit {
  @ViewChildren(Child) children: QueryList<Child>;

  afterViewInit() {
    for(let child of this.children) {



The loop inside afterViewInit() will work if you are transpiling to ES6 since angular2 internally uses Symbol.iterator. If you are transpiling to ES5 you'll have to workaround it since typescript does not support it (see plnkr for workaround).

Here's the plnkr.

I hope it helps :)