CODEWITHSUNDEEP
angularjscomponents
user1261710
user1261710

Reputation: 2639

AngularJS - child component not updating parent component data

I'm writing an app with AngularJS 1.5.3

I have a parent component with some data in it that needs to be updated in the child component. Right now the data is not updating in the parent component even though the input boxes on the child look like they are updating.

Here is my fiddle: https://jsfiddle.net/aubz88/ab85L19c/

Here is some sample code:

var grandChildComponent = {
  bindings: {
    min: '<',
    max: '<'
  },
    template: `
    <div>
      Grand Child component
      <input ng-model="$ctrl.min" />
      <input ng-model="$ctrl.max" />
    </div>
  `
};

Upvotes: 0

Views: 1382

Answers (1)

Protozoid
Protozoid

Reputation: 1207

That would be because you are using one-way bindings (Reference docs here and a helpful article here).

If you want your data updates to go from-parent-to-child and from-child-to-parent, then you need two-way data binding using the symbol =.

Here's a working JSFiddle

E.g.

var grandChildComponent = {
    bindings: {
        min: '=',
        max: '='
    },
    template: `
        <div>
            Grand Child component
            <input ng-model="$ctrl.min" />
            <input ng-model="$ctrl.max" />
        </div>
    `
};

Upvotes: 3

Related Questions