Efficient way of angularjs binding - whole object vs individual values

Question

I have a component and a subcomponent. The subcomponent works on some data and sends the data to parent component.

So my flow goes like this:

component('parentComponent', {
    controller: function () {
        vm.onSubcomponentValueChange = function (obj) {
            // convert data into some other format, lets say for example
            vm.objAPIFormat = [];
            for (value in obj.somevalue1) {
                vm.objAPIFormat.push({
                    'somevalue1': value
                    'somevalue2': obj.somevalue2,
                    'somevalue3': obj.somevalue3
                });
            }
        }

        vm.onFormSubmit = function () {
            // make an API call with some complex format of obj
            // API call in service with vm.objAPIFormat
        }
    }
}

component('subComponent', {
    bindings: {
        inputObject: '<',
        onInputObjectChange: '&'
    }
    controller: function () {
        vm.$onChange = function (changes) {
            if (changes.inputObject) {
                vm.obj = changes.inputObject.currentValue;
            }
        }

        //some complex logic with vm.obj.somevalue1 = []
        //some complex logic with vm.obj.somevalue2 = ''
        //some complex logic with vm.obj.somevalue3 = ''

        vm.onSubcomponentChange= function () {
            vm.onInputObjectChange(vm.obj);
        }
    }
}

Now my question is, which is an efficient approach?

passing inputObject as a single object to subcomponent? or splitting up the object into individual bindings? Like:

bindings: {
  somevalue1: '<',
  somevalue2: '<',
  somevalue3: '<'
  onSomeValue1Change: '&'
  onSomeValue2Change: '&'
  onSomeValue3Change: '&'
}

Nikolaj Dam Larsen · Accepted Answer · 2017-08-05 21:10:40Z

1

If you bind one object with multiple properties, the subcomponent wont trigger the $onChanges event when the properties of this object changes. Only if the reference to the object changes (or the value, in case of a value type) is the $onChanges handler called.

So if you rely on handling the property change individually, you would have to bind them individually, or you'd have to add your own watchers to the properties in the subcomponent. The latter option would even out any saving in efficiency from having only one binding - or might even make it slightly worse.

In addition, if you only have a few instances of these components (or even just one) in the DOM at any one point, then you don't really have to bother too much with optimizing your number of component bindings.

edited Aug 5, 2017 at 21:10

answered Aug 5, 2017 at 20:58

Nikolaj Dam Larsen

5,7246 gold badges38 silver badges46 bronze badges

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

Comments

georgeawg · Accepted Answer · 2017-08-05 22:08:06Z

Be aware that one-way < binding only triggers the $onChange function when the identity of the object changes. If the directive needs to do things when the contents of the object changes, equality checking needs to be done in the $doCheck function:

component('subComponent', {
    bindings: {
        inputObject: '<',
        onInputObjectChange: '&'
    }
    controller: function () {
        var vm = this;
        vm.$onChange = function (changes) {
            if (changes.inputObject) {
                vm.obj = changes.inputObject.currentValue;
            }
        };

        vm.$doCheck = function() {
            var oldValue;
            if (!angular.equals(vm.inputObject, oldValue) {
                oldValue = vm.inputObject;

                //code to update directive

            };
        };    
    }
}

For more information, see

Collectives™ on Stack Overflow

Efficient way of angularjs binding - whole object vs individual values

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related