Angular 1.5 component demo

by aubz88

HTML

<div ng-app="demoApp">
  <parent></parent>
</div>

CSS

</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<style>

JavaScript

var parentComponent = {
    controller: function (){
		this.onHold = function(value) {
        	console.log(' parent on hold ', value);        
        };
    },
		template: `
    	<div>
        <h1>Parent</h1>
        <child handle-hold="$ctrl.onHold(value)"></child>
      </div>
    `
};

var childComponent = {
  bindings: {
  	handleHold: '&'
  },
  controller: function() {
/*   	this.handleHold = function(value) {
  	        console.log(' child handle hold ', value);
  	        this.onHold(value);
  	    }; */
  },
	template: `
  	<div>
      Child component
      <grand-child handle-hold="$ctrl.handleHold(value)" />
    </div>
  `
};

var grandChildComponent = {
  bindings: {
  	handleHold: '&'
  },
  controller: function() {
  	this.hold = function(value) {
      	console.log('grand child handle hold ', value);
        this.handleHold(value);
    };  
    this.onClick = function() {
    	console.log(' on click ');
    };
  },
	template: `
  	<div>
      Grand Child component
      <div class="item" ng-click="$ctrl.hold('hello')">Click and Hold</div>
    </div>
  `
};

angular.module('demoApp', [])
  	.component('parent', parentComponent)
	.component('child', childComponent)
	.component('grandChild', grandChildComponent)