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.list = [{
      	min: 1,
        max: 5   
      }];
    },
		template: `
    	<div>
        <h1>Parent: {{ $ctrl.list.length }}</h1>
        <child list="$ctrl.list"></child>
      </div>
    `
};

var childComponent = {
  bindings: {
  	list: '<'
  },
	template: `
  	<div>
      Child component
      <grand-child ng-repeat="item in $ctrl.list" min="item.min" max="item.max" />
    </div>
  `
}

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

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