Angular 1.5 Component demo

by Aides

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.js"></script>
<div ng-app="App">
  <test value="root.value" change="root.value=newVal" ng-init="root.value = 0">

  </test>
  <p ng-bind="root.value">
  
  </p>
  <br><br>
  <left-right-swapper selectedValue="root.selection" possible-values="[2011,2012,2013,2015]" selected-value-changed="root.selection=newVal"></left-right-swapper>

</div>

TypeScript

angular.module('App', [])
	.component('test',
  {
  	bindings: {
    	value: '<',
      change: '&'
    },
    controller: function(){
    	this.count = function()
      {
      	this.value = this.value + 1
      	this.change({ newVal: this.value });
      }
    },
    template: '<p ng-bind="$ctrl.value"></p><button ng-click="$ctrl.count()">Click!</button>'
  })
  .component('leftRightSwapper', 
  {
  	template: `<button ng-click="$ctrl.selectPrevious()">
    						 &lt;
               </button>
               <span ng-bind="$ctrl.selectedValue"></span>
               <button ng-click="$ctrl.selectNext()">
                 &gt;
               </button><span ng-bind="$ctrl|json"></span>`, 
  	bindings: 
    {
    	possibleValues: '<',
      selectedValue: '<',
      selectedValueChanged: '&'
    },
    controller: LeftRightController
  })
  
  class LeftRightController
  {
  	constructor()
    {
    	console.log('test');
    }
  
  	possibleValues: number[];
    selectedValueChanged: (number) => any;
    private _selectedValue;
    get selectedValue()
    {
    	return this._selectedValue;
    }
    set selectedValue(val)
    {
    	this._selectedValue = val;
      this.selectedValueChanged({ newVal: this._selectedValue });
    }
    
    $onInit = () =>
    {
      console.log(this.possibleValues);
    	if(!this.selectedValue)
      {
      	this.selectedValue = this.possibleValues.slice(-1)[0];
      }
    }
    
    get previous()
    {
    	return this.possibleValues[this.possibleValues.indexOf(this.selectedValue) - 1];
    }
    get next()
    {
    	return this.possibleValues[this.possibleValues.indexOf(this.selectedValue) + 1];
    }
    
    adjacendValues = 
    {
    	left: this.previous,
      right: this.next
    }
    
    selectPrevious = () =>
    {
    	console.log('called');
    	this.selectedValue = this.previous;
    }
    
    selectNext = () => 
    {
    	console.log('called');
    	this.selectedValue = this.next;
    }
  }