Angular 1.5 component demo

by jeklund

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 = {
		require: {
    	ngModel: 'ngModel'
    },
    controller: function (){
      var ctrl = this;
    	ctrl.api = {
        someKey: 123
      };
      ctrl.someMethod = function (event) {
        ctrl.api = event.message;
      };
    },
		template: `
    	<div>
        <h1>Parent API: {{ $ctrl.api.someKey }}</h1>
        <child 
          api="$ctrl.api"
          on-update="$ctrl.someMethod($event);">
        </child>
      </div>
    `
};

var childComponent = {
  bindings: {
  	api: '<',
    onUpdate: '&'
  },
	template: `
  	<div>
      Child component
      <input ng-model="$ctrl.api.someKey">
      <button ng-click="$ctrl.doSomething();">
        Click me
      </button>
    </div>
  `,
  controller: function(){
  	var ctrl = this;
    ctrl.$onChanges = function (changes) {
      if (changes.api) {
        ctrl.api = angular.copy(ctrl.api);
      }
    };
    ctrl.doSomething = function () {
      ctrl.onUpdate({
        $event: {
          message: ctrl.api
        }
      });
    };    
  }
}

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