Provide callback for custom component

Question

I made a custom component which basically wraps a d3 line chart. Now I want to be able to register a callback for clicks on the lines in the chart.

I gave the component a @NgCallback parameter, which I then send events to:

class NetworkSummaryComponent implements NgShadowRootAware {
  @NgCallback('callback')
  Function callback;

  void onShadowRoot(ShadowRoot shadowRoot) {
    ...
    chart.callMethod('listen', ['line-click', (ev) {
        var name = ev.callMethod('getLineName');
        print(name);
        callback({'name': name});
    }]);
  }
}

When using the component, I specify a function of my controller as callback:

<network-summary
    ...
    callback="ctrl.lineClicked">
</network-summary>

However, that function is never actually called, put I know the callback arrives from the JS side because the print in the first snippet is executed.

If I instead specify the attribute as callback="ctrl.lineClicked()" I get a strange exception:

Closure call with mismatched arguments: function 'call'

I could not find any official documentation on how to properly do callbacks, so I'm not exactly sure what I'm doing wrong.. Any ideas?

Answer 1

It turns out that I had to explicitly name the expected arguments in the attributes:

<network-summary
    ...
    callback="ctrl.lineClicked(name)">
</network-summary>

Hope this is useful to the next person having this problem.