Bindings types for input parameters

'<' one-way binding - variable change is populate from parent component into nested component, but change in nested component is not populate into parent component.

'=' two-way binding - variable change is populate from parent into nested component and also from nested into parent component. This type of binding isn't recommeded to use.

'&' expression binding - this is usefull for callback events. Interprets input parameter as a statement. The component can then call the imput function.

'@' string binding - input value is used as a string not as a variable name like in previous binding types.

This tutorial is for AngularJS 1.5+

child-component.html

<div style="background: #c76b01; padding:20px">
    <h2>Child component</h2>
    <p>One-way binding: {{model.oneWayParameter}}</p>
    <p>One-way binding: <input ng-model="model.oneWayParameter"/></p>
    <hr />
    <p>Two-way binding: {{model.twoWayParameter}}</p>
    <p>Two-way binding change: <input ng-model="model.twoWayParameter"/></p>
    <hr />
    <p>Expression binding <button ng-click="model.onClickParameter()">click</button></p>
    <p>String binding: {{model.stringParameter}}</p>
</div> 

child-component.js

angular
    .module('myApp')
    .component('childComponent', {
        templateUrl: 'components/component-bindings/child-component.html',
        bindings: {
            oneWayParameter: '<',
            twoWayParameter: '=',
            stringParameter: '@',
            onClickParameter: '&'
        },
        controllerAs: 'model',
        controller: ['$log', function($log){
            var model = this;

            model.$onChanges = function(changesObj) {
                if (changesObj.oneWayParameter && changesObj.oneWayParameter.currentValue != changesObj.oneWayParameter.previousValue)
                {
                    $log.info('oneWayParameter was changed, new value => ' + changesObj.oneWayParameter.currentValue);
                }
            }
        }]
    })

parent-component.html

<div style="background: #dddddd; padding:20px">
<h1>Parent component</h1>
<p>
    One-way variable: <br />
    <input ng-model="model.oneWayVariable" />
</p>

<p>
    Two-way variable: <br />
    <input ng-model="model.twoWayVariable" />
</p>

<child-component    one-way-parameter="model.oneWayVariable"
                    two-way-parameter="model.twoWayVariable"
                    string-parameter="text"
                    on-click-parameter="model.onClickEvent()" ></child-component>

</div> 

parent-component.js

angular
    .module('myApp')
    .component('parentComponent', {
        templateUrl: 'components/parent-component.html',
        controllerAs: 'model',
        controller: function() {
            var model = this;

            model.onClickEvent = function() {
                alert('On click button!');
            }
        }
    })

Check Plunker: Check this AngularJS component bindings example on Plunker

Track input parameters changes

As you can seen on example above in child-component.js you can use build in event to track input parameter changes.

You can do it by using $onChanges(changesObj) event. You can compare currentValue and previousValue to get notification on value change:

    function childComponentController($log){
        var model = this;
        
        model.$onChanges = function(changesObj) {
            if (changesObj.oneWayParameter && changesObj.oneWayParameter.currentValue != changesObj.oneWayParameter.previousValue)
            {
                $log.info('oneWayParameter was changed, new value => ' + changesObj.oneWayParameter.currentValue);
            }
        }
    }