Understanding how parent and child components handle an object

Question

I'm wondering how angular handle an object shared between a parent and child component.

Let me show you a simple example: ParentComponent

@Component({
  selector: 'app-parent',
  template: `<app-children [(data)]="message"></app-children>
            <div>Parent: {{message}}</div>`,
})

export class ParentComponent implements OnInit {
  public message: string;

  ngOnInit() {
    this.message = 'Original message'
  }
}

Children Component

@Component({
  selector: 'app-children',
  template: `<div>Children: {{data}}</div> 
             <a (click)="changeMessage('Children message')">Click me!</a>`
})

export class ChildrenComponent {
  @Input() public data: string;
  changeMessage(message: string) {
    this.data = message;
  }
}

When I click on the "Click me!" link, i see only the Children message change, but not the parent one. Isn't it the same object?

Answer 1

consider you should emit the changed value from child and also your emitter name should be [your bind var name]+'Change' so it will work:

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<app-children [(data)]="message"></app-children>
            <div>Parent: {{message}}</div>`,
})

export class AppComponent {
  public message: string;

  ngOnInit() {
    this.message = 'Original message'
  }
}

@Component({
  selector: 'app-children',
  template: `<div>Children: {{data}}</div> 
             <a (click)="changeMessage('Children message')">Click me!</a>`
})

export class ChildComponent {
  @Input() public data: string;
  @Output() dataChange= new EventEmitter<string>();
  changeMessage(message: string) {
    this.data = message;
    this.dataChange.emit(this.data);
  }
}

check DEMO and creating custom two-way data bindings.