How to return a value from an EventEmitter function?

You need to subscribe on the event emitter to get the value:

this.onBeforeAdding.emit(value || true);

this.onBeforeAdding.subscribe(isValid => {
  if (isValid) {
    // Do stuff
  }
});

The short answer is you can't do this with @Output, but you can do something very similar with @Input.

Same function in core component:

isValid(value: any): boolean {
  // Do some stuff and return something based on the result
  return false;
}

Pass the function definition in to other-component as an @Input:

<other-component [onBeforeAddingProcessor]="isValid"></other-component>

In other-component:

@Input() onBeforeAddingProcessor: (value: any) => boolean;

ngOnInit() {
  // onBeforeAddingProcessor won't be defined in the constructor
  let isValid = this.onBeforeAddingProcessor(value);

  if (isValid) {
    // Do stuff
  }
}

Methods accessing this

If you have to access this in the function you provide, then it's necessary to pass a method which already has the this-context bound:

isValid = (value: any) => {
  return this.myService.checkValue(value);
}

Otherwise Angular calls the method with this of the component, not the consumer of the component. Small hint regarding performance (though not tested): if this method is large and the instance-count of the component is high, then you should factor out the bigger parts of the code to a private member function and call this function from where it was factored out. Reason: Above does not create a function on the prototype of the class, but stamps out a copy of this function for each instance of the component. This can consume a lot of memory which can be avoided easily.


This is possible without much effort

  1. Create EventEmitter within your child component
@Output('request_data')
requestData: EventEmitter<any> = new EventEmitter<any>();
  1. create a method to request data within your child component, the trick here is to pass an object with an anonymous function
    click() {
        this.requestData.emit({
            data: "some-data",
            func: (data_from_parent => {
               //do whatever you want
            })
        });
    }
  1. From your parent component, do whatever you want and call the function
     callFromChild(obj) {
        //obj.data
        //obj.func();
    }

Tags:

Angular