How to use two way data binding between components in angular 2?

Question

First I've created a User class:

export class User {
  name: string;
  email: string;
}

Then I've got my CoreComponent which uses the FormInputComponent as well as creating a public user from the User class:

import {Component} from 'angular2/core';
import {FormInputComponent} from '../form-controls/form-input/form-input.component';
import {User} from '../core/user';

@Component({
  selector: 'core-app',
  templateUrl: './app/assets/scripts/modules/core/core.component.html',
  styleUrls: ['./app/assets/scripts/modules/core/core.component.css'],
  directives: [FormInputComponent]
})

export class CoreComponent {
  public user: User = {
    name: '',
    email: ''
  }
}

Then I've created an input component, which is a re-useable input component that will take a model value as an input and when changes are made export the new value so that CoreComponent can update the model with the new value:

import {Component, Input, Output, EventEmitter, DoCheck} from 'angular2/core';

@Component({
  selector: 'form-input',
  templateUrl: './app/assets/scripts/modules/form-controls/form-input/form-input.component.html',
  styleUrls: ['./app/assets/scripts/modules/form-controls/form-input/form-input.component.css'],
  inputs: [
    'model',
    'type',
    'alt',
    'placeholder',
    'name',
    'label'
  ]
})

export class FormInputComponent implements DoCheck {
  @Input() model: string;
  @Output() modelExport: EventEmitter = new EventEmitter();

  ngDoCheck() {
    this.modelExport.next(this.model);
  }
}

The CoreComponent's template uses two FormInputComponents and passes user.name and user.email as the input for them:

<form-input [model]="user.name" type="text" name="test" placeholder="This is a test" alt="A test input" label="Name"></form-input>
<form-input [model]="user.email" type="email" name="test" placeholder="This is a test" alt="A test input" label="Email"></form-input>
<pre>{{user.name}}</pre>

The FormInputComponent template:

<div>
  <label attr.for="{{name}}">{{label}}</label>
  <input [(ngModel)]="model" type="{{type}}" placeholder="{{placeholder}}" alt="{{alt}}" id="{{name}}">
</div>
<pre>{{model}}</pre>

Now the problem is that I can only see the changes from the pre element that lies inside the FormInputComponent template, but the parent, CoreComponent's pre element remains unchanged.

I looked at this question which is in the ballpark of what I want to achieve but not quite since using a service for just returning a value up the hierarchy seems like overkill and a bit messy if you have multiple FormInputComponents on the same page.

So my question is simple, how can I pass a model to FormInputComponent and letting it return a new value whenever the value changes so that the public user in CoreComponent changes automatically?

Answer 1

To be able to use two way binding short when using your component you need to readme your output property to modelChange:

export class FormInputComponent implements DoCheck {
  @Input() model: string;
  @Output() modelChange: EventEmitter = new EventEmitter();

  ngDoCheck() {
    this.modelChange.next(this.model);
  }
}

And use it this way:

<form-input [(model)]="user.name" type="text" name="test" placeholder="This is a test" alt="A test input" label="Name"></form-input>
<form-input [(model)]="user.email" type="email" name="test" placeholder="This is a test" alt="A test input" label="Email"></form-input>
<pre>{{user.name}}</pre>

Answer 2

As an addition: Using ngDoCheck to emit model changes will DRASTICALLY affect performance as the new value gets emited on every check cycle, no matter if it was changed or not. And that is really often! (Try a console.log!)

So what I like to do to get a comparable convenience, but without the side effects, is something like this:

private currentSelectedItem: MachineItem;
@Output() selectedItemChange: EventEmitter<MachineItem> = new EventEmitter<MachineItem>();

@Input() set selectedItem(machineItem: MachineItem) {
    this.currentSelectedItem = machineItem;
    this.selectedItemChange.emit(machineItem); 
}

get selectedItem(): MachineItem {
    return this.currentSelectedItem; 
}

And use it like

<admin-item-list [(selectedItem)]="selectedItem"></admin-item-list>

You can also emit the new value where it is actually changed. But I find it quite convenient to do that gloabaly in a setter method and don't have to bother when I bind it directly in my view.

Answer 3

This was too long to add as a comment to Thierry's answer...

Use emit() instead of next() (which is deprecated), and only call emit(newValue) when the value of model changes. Most likely you want something like this in your FormInputComponent template:

<input [ngModel]="model" (ngModelChange)="onChanges($event)">

Then in your FormInputComponent logic:

onChanges(newValue) {
  this.model = newValue;
  this.changeModel.emit(newValue);
}

Answer 4

I found the other answers to be a bit confusing so I boiled everything down to what I think is a very simple answer with a Stack Blitz example.

This example requires only 2 simple components, app.component & test.component. The real magic only requires appending "Change" to the name of the Output decorator. Just use the exact name as the @Input decorator and add "Change" to the end of it. In this example the @Input name is "testVal" and the @Output name is "testValChange", it's Angular syntactical sugar, or magic :-) to the laymen.

The following is the complete app.component.ts file,

import { Component, Input } from "@angular/core";

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

  {{testVal}} <-- this value is printed by app.component

  <test-component [(testVal)]="testVal"></test-component>

  `
})
export class AppComponent {
  @Input() testVal = "My Greeting";

}

And the following is the complete test.component file,

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

@Component({
  selector: "test-component",
  template: `
  <br /><br />
  <input type="button" (click)="hi()" value="update greeting" /> <-- this button in test.component updates the greeting above using two way binding.
  `
})
export class TestComponent {
  @Input() testVal;
  @Output() testValChange = new EventEmitter<string>();
  increment = 0;

  hi(){
    this.testVal = 'Hey There!';
    this.testValChange.emit(this.testVal + String(this.increment));
    this.increment++;
  }
}

Cheers!

Answer 5

Having a similar issue now, but one additional layer: a component, which contains a child component it passes a data-object to, which contains another child-component with an input-field it passes the same data-object to. I want to edit the input-field and pass the data back up 2 layers to the parent component. Not able to achieve that for some reason...

I added a stackblitz: https://stackblitz.com/edit/angular-8oh2fm