AngularJS - child component not updating parent component data

Question

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>
  `
};

You should use two-way data bindings (=) in both of your child and grand child components. — Immanuel Kirubaharan
– Immanuel Kirubaharan, Commented Jun 8, 2018 at 16:17

Protozoid · Accepted Answer · 2018-06-08 16:14:39Z

3

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>
    `
};

answered Jun 8, 2018 at 16:14

Protozoid

1,2071 gold badge8 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS - child component not updating parent component data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related