Angular Dart component events

Question

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 use a normal StreamController but then i'd had to connect my components with code.

confirmComponent.onConfirmYes.listen()
confirmComponent.onConfirmNo.listen()

I also found this: How to communicate between Angular DART controllers

And this: angulardart components - dispatch custom event

In both treads scope.emit is mentioned. But i didn't find a way to use it with a component instead of a controller. Is there a full example vor angular.dart v0.14.0?

Is scope.emit the thing i'm searching for?

Günter Zöchbauer · Accepted Answer · 2014-10-03 07:54:46Z

4

This should be the same, just add a scope argument to the constructor so the component gets the scope injected.

There was a related change in Angular 0.14.0 https://github.com/angular/angular.dart/commit/181f01448555c475869505491159045904e5dc89

I haven't yet tried this. From the description you need to implement ScopeAware

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

answered Oct 3, 2014 at 7:54

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Slemgrim · Accepted Answer · 2014-10-03 09:02:08Z

2

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

edited Oct 3, 2014 at 9:02

answered Oct 3, 2014 at 8:52

Slemgrim

9672 gold badges8 silver badges23 bronze badges

1 Comment

Günter Zöchbauer Over a year ago

You could simply write scope.on('confirm').listen(...). If you want to unsubscribe you should store the StreamSubscription returned from listen where you can call cancel() to unsubscribe from the event.

Collectives™ on Stack Overflow

Angular Dart component events

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related