Pass data from parent to child angular.js components

Question

I have parent component:

(function () {
  angular.module('app.module')
    .component('parentComponent', {
      templateUrl: 'parent.html',
      controllerAs: 'vm',
      controller: function ($scope) {
      this.$onInit = () => {
        $scope.parentData = 'test'
      }
  })
})()

child component

(function () {
  angular.module('app.module').component('childComponent', {
  templateUrl: 'child.html',
  controllerAs: 'vm',
  controller: function () {
  this.$onInit = () => {
  }
 }
})
})()

parent.html

<child-component></child-component>

child.html

<p>{{parentData}}</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.

Thanks for any suggestions.

score 5 · Accepted Answer · answered Aug 22 '18 at 20:33

Use one-way < binding:

<child-component in-data="$ctrl.parentData"></child-component>

The child component:

app.component("childComponent", {
    bindings: {
        inData: '<',
    },
    template: `
        <div>{{$ctrl.inData}}</div>
    `,
})

The DEMO

angular.module("app",[])
.component("parentComponent", {
    template: `
        <fieldset>
            Inside parent component<br>
            parentData={{$ctrl.parentData}}
            <child-component in-data="$ctrl.parentData"></child-component>
        </fieldset>
    `,
    controller: function () {
        this.$onInit = () => {
            this.parentData = 'test'
        };
    },
})
.component("childComponent",{
    bindings: {
        inData: '<',
    },
    template: `
        <fieldset>Inside child component<br>
            inData={{$ctrl.inData}}
        </fieldset>
    `,
})

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
    <parent-component>
    </parent-component>
<body>

For more information, see

score 1 · Answer 2 · edited Aug 22 '18 at 22:20

1

You can access parent's data via the parent controller, for that you can use require in your component declaration:

Here is an example:

app.component('childComponent', {
  require: {
    parentCtrl: '^parentComponent'
  },
  controller: function() {
    var self = this;
    this.$onInit = function() {
      self.parentCtrl.anyData;
    };
  }
});

Take a look at codelord.net - Advanced Angular 1.x: Component Communication with Require

If you don't need the parent controller you can bind data to your child component: refer to @georgeawg answer

edited Aug 22 '18 at 22:20

georgeawg

48,608
13
72
95

answered Aug 22 '18 at 20:01

IsraGab

4,819
3
27
46

If you are down voting please leave a message, so I can at least now why my answer is bad. If it's because he asks for pass data from parent to child and my answer is to pass the controller I don't think it should be done voted. sometimes it helps to pass the controller and not only the data – IsraGab Aug 22 '18 at 20:35
The `require` technique should not be used to replace any kind of simple binding. It’s totally fine to pass some values between components using bindings–it can be more explicit and simpler to maintain. After all, it’s usually easier to understand what a component depends on if all you need to do is look at its bindings. – georgeawg Aug 22 '18 at 20:50
First and foremost, require doesn’t work in all scenarios. It can only be used by a component/directive to get access to a parent controller (or a controller on the same element). Sibling components can’t communicate using it, and neither can a parent component access its children using it (at least not directly, keep reading for an interesting option). – georgeawg Aug 22 '18 at 20:52
Another limitation of require is that it assumes the child component knows the name of the other component that it want to require. There’s no abstraction/indirection here – the name of the required component is hard-coded in the requiring component. – georgeawg Aug 22 '18 at 20:52
anyway I don't think it's fair-play to down vote my answer. Maybe it's not a best practice and may be better to bind data to child. But if the require attribute exists and angular makes it possible so is not so bad to do it like this. – IsraGab Aug 22 '18 at 20:55
You're right. I edited my answer – IsraGab Aug 22 '18 at 21:08

Pass data from parent to child angular.js components

2 Answers2