title: Pass data from parent to child angular.js components
body: <p>I have parent component: </p>
  
  <pre><code>(function () {
    angular.module('app.module')
      .component('parentComponent', {
        templateUrl: 'parent.html',
        controllerAs: 'vm',
        controller: function ($scope) {
        this.$onInit = () =&gt; {
          $scope.parentData = 'test'
        }
    })
  })()
  </code></pre>
  
  <p>child component</p>
  
  <pre><code>(function () {
    angular.module('app.module').component('childComponent', {
    templateUrl: 'child.html',
    controllerAs: 'vm',
    controller: function () {
    this.$onInit = () =&gt; {
    }
   }
  })
  })()
  </code></pre>
  
  <p>parent.html</p>
  
  <pre><code>&lt;child-component&gt;&lt;/child-component&gt;
  </code></pre>
  
  <p>child.html</p>
  
  <pre><code>&lt;p&gt;{{parentData}}&lt;/p&gt;
  </code></pre>
  
  <p>So I want to have access to parentData in my child component for display string 'test' in my child component. How can I do it? I read something about bindings but I don't know how to use it in this example. </p>
  
  <p>Thanks for any suggestions. </p>