title: Communicating Events from Parent to Child in AngularJS Components
body: <p>in the new project I'm working on I've started using the components instead of directives.</p>
  
  <p>however, I've encountered an issue where I cannot find a concrete standard way to do it.</p>
  
  <p>It's easy to notify an event from child to parent, you can find it on my plunkr below, but what's the correct way to notify a event from parent to child?</p>
  
  <p>Angular2 seems to solve this issue by using something like this: <a href="https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-local-var" rel="noreferrer">https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-local-var</a>
  But I don't tink there's a possibilty to define a "pointer" to the child component like the example did with #timer</p>
  
  <p>In order to mantain a possible easy conversion to Angular2 I want to avoid:</p>
  
  <ul>
  <li>event emitting (emit and broadcast from the scopes)</li>
  <li>using the require from the child (and then add a callback to the parent..UGLY)</li>
  <li>using a one-way binding, injecting the scope in the child and then "watch" this property.. MORE UGLY</li>
  </ul>
  
  <p>Example code: </p>
  
  <pre><code>var app = angular.module('plunker', []);
  
  app.controller('RootController', function() {
  });
  
  app.component('parentComponent', {
    template: `
      &lt;h3&gt;Parent component&lt;/h3&gt;
      &lt;a class="btn btn-default btn-sm" ng-click="$ctrl.click()"&gt;Notify Child&lt;/a&gt;
      &lt;span data-ng-bind="$ctrl.childMessage"&gt;&lt;/span&gt;
      &lt;child-component on-change="$ctrl.notifiedFromChild(count)"&gt;&lt;/child-component&gt;
    `,
    controller: function() {
      var ctrl = this;
      ctrl.notifiedFromChild = function(count){
        ctrl.childMessage = "From child " + count;
      }
      ctrl.click = function(){
      }
    },
    bindings: {
    }
  });
  
  app.component('childComponent', {
    template: `
      &lt;h4&gt;Child component&lt;/h4&gt;
      &lt;a class="btn btn-default btn-sm" ng-click="$ctrl.click()"&gt;Notify Parent&lt;/a&gt;
    `,
    controller: function() {
      var ctrl = this;
      ctrl.counter = 0;
      ctrl.click = function(){
          ctrl.onChange({ count: ++ctrl.counter });
      }
    },
    bindings: {
      onChange: '&amp;'
    }
  });
  </code></pre>
  
  <p>You can find an example here:</p>
  
  <p><a href="http://plnkr.co/edit/SCK8XlYoYCRceCP7q2Rn?p=preview" rel="noreferrer">http://plnkr.co/edit/SCK8XlYoYCRceCP7q2Rn?p=preview</a></p>
  
  <p>This is a possible solution I created</p>
  
  <p><a href="http://plnkr.co/edit/OfANmt4zLyPG2SZyVNLr?p=preview" rel="noreferrer">http://plnkr.co/edit/OfANmt4zLyPG2SZyVNLr?p=preview</a></p>
  
  <p>where the child requires the parent, and then child sets a parent reference to the child... now parent can use the child... ugly but it's like angular2 example above</p>