Passing models between components

Question

I created two custom components using AngularDart, one PersonsView and anoter PersonView. The html template of the first contains a list of the second:

<div>
  <personview ng-repeat="person in ctrl.persons" ng-model="person"/>
</div>

While the view itself just contains a simple span with the name property of the person.

<span>{{person.name}}</span>

The dart code for the personview is:

@Component(
    selector: 'personview[ng-model]',
    templateUrl: 'packages/myproject/persons/person_component.html',
    cssUrl: 'packages/myproject/persons/person_component.css',
    publishAs: 'ctrl'
)
class PersonView {

   NgModel ngModel;

   PersonView(this.ngModel){
      print(ngModel.modelValue);
   }
}

Whatever I try the ngModel keeps returning null, Is it possible to pass the model information from one to the other custom component? And if so, how should it be done?

A similar question show a possible solution, but that still returns null for me. How to pass an object from ng-repeat to component using AngularDart?

Answer 1

I answered a similar question here:

If two different components are in the same view (ngRoute), how can they share a common object or communicate?

Let me know if this approach will work for this question as well.