JSFiddle - React, Tailwind, and code Playground

by Fareez Ahmed

HTML

<div ng-app="app">
    <stateful-component></stateful-component>
</div>

CSS

</style>
<script src="//code.angularjs.org/1.5.5/angular.min.js"></script>
<style>
* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font: 300 14px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body { background: #eee; margin: 0; padding: 25px; }

JavaScript

var statefulComponent = {
	template: `
  	<div>
    	{{ $ctrl.user }}
    	<stateless-component 
      	user="$ctrl.user" 
        on-update="$ctrl.updateUser($event);">
      </stateless-component>
    </div>
  `,
  controller: function () {
    this.user = {
    	name: 'Todd',
      location: 'England, UK'
    };
    this.updateUser = function (event) {
    	this.user = event.user;
    };
  }
};

var statelessComponent = {
	bindings: {
  	user: '<',
    onUpdate: '&'
  },
  controller: function () {
  	this.$onChanges = function (changes) {
    	if (changes.user) {
      	this.user = angular.copy(this.user);
      }
    };
    this.save = function() {
    	this.onUpdate({
        $event: {
        	user: this.user
        }
      });
    }
  },
  template: `
  	<div>
    	<input type="text" ng-model="$ctrl.user.name">
      <a href="" ng-click="$ctrl.save()">Update</a>
    </div>
  `
};

angular
	.module('app', [])
  .component('statefulComponent', statefulComponent)
	.component('statelessComponent', statelessComponent);