Call a method of the child component

Question

I have a nested child component like this:

Answer 1

Parent and child can communicate via data binding.

Example:

@Component({
    selector: 'child-component',
    inputs: ['bar'],
    template: `"{{ bar }}" in child, counter  {{ n }}`
})
class ChildComponent{
    constructor () {
        this.n = 0;
    }
    inc () {
        this.n++;
    }
}

@Component({
    selector: 'my-app',
    template: `
        

        call child func
        change parent var
    `,
    directives: [ChildComponent]
})
class AppComponent {
    constructor () {
        this.bar = 'parent var';
    }
}

bootstrap(AppComponent);  

Demo

#f creates a reference to the child component and can be used in template or passed to function. Data from parent can be passed by [ ] binding.