AIMMOTH: mars 2018

2018-03-12

Bind from Parent Component to Child

Simple example of how to one-way bind from parent component to child. The child component will be able to use the parent's data.

	<html>
	<head>
	</head>
	<body ng-app="app">

	<h1>From Parent to Child Component</h1>
	<parent>
	</parent>

	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>

	<script type="text/javascript">
	var app = angular.module("app", []);

	app.component("parent", {
	template : "<h2>Parent</h2><textarea ng-model='controller.model.stuff'></textarea><child data='controller.model.stuff'></child>",
	controllerAs : "controller",
	controller : [function() {
	var controller = this;

	controller.model = {
	stuff : "text"
	};
	}
	]
	});

	app.component("child", {
	template : "<h1>Child</h1><button ng-click='controller.show()'>Show</button>",
	controllerAs : "controller",
	bindings : {
	data : "<"
	},
	controller : [function() {
	var controller = this;

	controller.show = function() {
	alert(JSON.stringify(controller.data));
	};
	}
	]
	});

	</script>
	</body>
	</html>