Angular 2 ngModel in child component updates parent component property

Question

I made a simple UI which consist two components (parent and child).

What the UI does is that when I type some stuff in the input box of the Child component. The valu

Answer 1

You could set up event emitter communication (outputs) from child to parent. For example like this:

@Component({
    selector: 'child',
    template: `
        
Child: {{sharedVar}}
        
    `
})
export class ChildComponent {
    @Output() onChange = new EventEmitter();
    sharedVar: string;
    change() {
        this.onChange.emit({value: this.sharedVar});
    }
}

and the in parent component:

@Component({
    selector: 'parent',
    template: `
        
{{sharedVar}}
        
    `,
    directives: [ChildComponent]
})
export class ParentComponent {
    sharedVar: string;
    constructor() {

    }
}

Demo: http://plnkr.co/edit/T2KH4nGKPSy6GEvbF1Nb?p=info