Clever Geek Handbook

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?

+3


source to share


2 answers


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) => ...);
  }
}
+4


source


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);
        });
    }
}
+2


source






More articles:


All Articles