I've been studying up on Angular 2 so as to be able to prepare my Angular 1 projects for migration in the future. One thing that I am having trouble with is understanding the plan for exposing an API from a child component so that a parent component can perform actions inside the child.
As I understand it: 1) There are property bindings. These basically flow downward from parent to child and allow parents to pass data into the child
2) Event bindings allow the child to pass data back up into the parent.
There is a bit of ambiguity surrounding how a parent is supposed to affect the child after the child has already been created though. I mean, the most straightforward approach would be for the child to expose an API composed of methods which the parent could access and execute to cause pre-determined change in the child. The Angular 2 docs are not very clear (at least not to me) with respect to how this should be done.
So let's take a more concrete example.
I am building a filter-widget (which I use across an app) in Angular 1 and I am trying to design it to mirror the logic that would be used in its design in Angular 2. I would like my filter widget to expose an API which will contain a refresh method so that any parent can refresh the data that the filter widget is filtering.
Here is my component signature:
(function(){
'use strict';
angular
.module('dashboard')
.component('filtersWidget',
{
controller: 'FiltersWidgetCtrl',
controllerAs: 'filtersWidgetCtrl',
bindings: {
config: '<',
list: '='
}
}
);
})();
So far I have the config downward binding (or property binding) which basically tells the widget which filters it is to display and I have a two bound list which the filter widget is changing as it filters.
So I can think of three ways of tackling my issue. I am looking for thoughts on which is the most correct or if there is another better way to go about this.
1) The first way is to pass a two way bound refresh property which the filters widget can change to point to the refresh function. Then when the parent wants to refresh the list it can access the refresh method that way.
2) The second way to have a downward bound refresh boolean property which the filters widget can watch. When the parent wants to refresh it can set refresh to true and the filters widget will execute the refresh process and then set the boolean back to false.
3) Pass an upward binding ('&') called onAPICreate through which the child can pass the API to the parent.
My issue with the first approach is that it seems wrong to two way bind something that is really not flowing both directions. I mean, the refresh function itself is really only flowing one direction, up. The parent is not really passing any function down to the child.
My issue with the second approach is that it seems like an ueccessary watch as well as a very roundabout way of having a simple function executed.
The third approach is my favorite, I can't think of any real issues with but, as I said, I am looking for thoughts here.
Thanks in advance.
