I am trying to replicate this: http://plnkr.co/edit/OB2YTMJyeY3h9FOaztak?p=preview (this plunker is the example that works, and I want to get the same result but with my code, that isn't working)
==================================================================
I have this simple two way binding, I am trying to update a string property such on the parent as on the child
The problem: when clicking "update from parent", both bindings update. But when clicking "update from child", only the childs updates!
This seems very simple, what can I be doing wrong?
(Note: I used angular CLI for running up the project)
==================================================================
Parent component:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-my-dad',
templateUrl: './my-dad.component.html',
styleUrls: ['./my-dad.component.css']
})
export class MyDadComponent {
parentModel: string;
constructor() {}
updateModel(){
this.parentModel += ' parent';
}
}
Parent template
<h2>Parent: {{ parentModel }} </h2>
<button (click)="updateModel()"> update from parent </button>
<app-my-child [(model)]="parentModel"></app-my-child>
Child component
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-my-child',
templateUrl: './my-child.component.html',
styleUrls: ['./my-child.component.css']
})
export class MyChildComponent {
@Input() model: string;
constructor() { }
updateModel(){
this.model += ' child';
}
}
Child template:
<h2>Child: {{ model }} </h2>
<button (click)="updateModel()"> update from child </button>
The answer is "no". In your example, the value that you pass to the @Input property is a reference to an object. If you had two-way binding, you could assign a new object to that property in the child component: this.
Because no built-in HTML element follows the x value and xChange event pattern, two-way binding with form elements requires NgModel . For more information on how to use two-way binding in forms, see Angular NgModel.
In React, data flows one way: from owner to child. We think that this makes your app's code easier to understand. You can think of it as “one-way data binding.”
For two-way-binding using the [(xxx)]
(banana-in-a-box) syntax, you need an @Input()
and an @Output()
with matching names like:
@Input() myProp:String;
@Output() myPropChange:EventEmitter<String> = new EventEmitter<String>();
See also the guide https://angular.io/docs/dart/latest/guide/template-syntax.html#!#two-way
For two-way-binding with ngModel
to work, your component needs to implement ControlValueAccessor
.
See also:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With