Access methods through a parent component in a child with Angular 1

Question

Hello, I’m having a hard time getting information between 2 components working with Angular 1. This is my example:

angular.module("parent",["child"]).component("parent",{
  template : "<p> <child name></child> </div>",
  controllerAs:"parent",
  controller : {
    constructor(){}
  }
});

angular.module("child",[]).component("child",{
  binding : {
    "name" = "="
  }
  template : "<span>{{name}}</span>",
  controllerAs : "child",
  controller : {
    constructor(){
      this.name = name;
    }
  }
});

So far, in case I enter the value manually in <child name="foo"></child> the component Child has its contents changed. The problem is that I’m not understanding how through the Parent i will be able to change the content of the component name parameter Child

Could someone explain to me?

Answer 1

What you can do is simply pass a property from the parent component to the attribute name. Therefore, by changing the value of this property in the parent component, the process of Binding of Angularjs will be in charge of propagating the change to the child component.

You are using the modifier of Binding =, That means the property name can be modified in both parent and child.

Example:

angular.module('parent', ['child']).component('parent', {
  template: 'parent: {{ parent.myName }} <br> child: <child name="parent.myName"></child>',
  controllerAs: 'parent',
  controller: function() {
    this.myName = 'foo';
  }
});

angular.module('child', []).component('child', {
  bindings: {
    name: '<'
  },
  template: '<span>{{ child.name }}</span>',
  controllerAs: 'child',
  controller: function() {
    this.name = 'bar';
  }
});

angular.element(function() {
  angular.bootstrap(document, ['parent']);
});

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