Angular Dart Component Events
I am trying to pass custom events from a component to its parent component / controller
Confirm.html
<div class="comfirm-component"> <content></content> <a href="#" ng-click="ctrl.yes()">Yes</a> <a href="#" ng-click="ctrl.no()">No</a> </div>
confirm.dart
@Component( selector: "confirm-component", templateUrl: 'confirm.html', useShadowDom: false, publishAs: "ctrl" ) class ConfirmComponent { void yes(){ print('yes'); // Fire confirm-yes event } void no(){ print('no'); // Fire confirm-no event } }
is there something like this ?:
<confirm-component on-confirm-yes="doSomething()" on-confirm-no="doSomethingElse()"> Do you want to delete </confirm-component>
I could have used a regular StreamController, but then I had to connect my components with code.
confirmComponent.onConfirmYes.listen() confirmComponent.onConfirmNo.listen()
I also found this: How to communicate between DART Angular controllers
And this: angulardart components - dispatching a custom event
Both pointers specify scope.emit. But I haven't found a way to use it with a component instead of a controller. Is there a complete example vor angular.dart v0.14.0?
Is scope.emit what I'm looking for?
source to share
It should be the same, just add the scope argument to the constructor for the component to inject the input scope.
There was a related change in Angular 0.14.0 https://github.com/angular/angular.dart/commit/181f01448555c475869505491159045904e5dc89
I haven't tried this yet. From the description, you need to implementScopeAware
@Component(...) class MyComponent implements ScopeAware { Watch watch; MyComponent(Dependency myDep) { // It is an error to add a Scope / RootScope argument to the ctor and will result in a DI // circular dependency error - the scope is never accessible in the class constructor } void set scope(Scope scope) { // with this scope you should be able to use emit // This setter gets called to initialize the scope watch = scope.rootScope.watch("expression", (v, p) => ...); } }
source to share
Based on the answer from Günter, I built this working example:
@Component( selector: "confirm-component", templateUrl: 'component/confirm.html', useShadowDom: false, publishAs: "ctrl" ) class ConfirmComponent implements ScopeAware { Scope scope; void yes(){ scope.emit('confirm', 'yes'); } void no(){ scope.emit('confirm', 'no'); } } @Component( selector: "my-component", templateUrl: 'component/my.html', useShadowDom: false, publishAs: "ctrl" ) class MyComponent implements ScopeAware{ void set scope(Scope scope) { Stream mystream = scope.on('confirm'); mystream.listen((event){ print('confirmed: ' + event.data); }); } }
source to share