Some times we can have a case when generic variable should be omitted. Like this:
@Component( ... ) class MyComponent { @Output() public cancel = new EventEmitter<undefined>(); private myFoo() { this.cancel.emit(); // no need to pass any value } }
So, the question: Which is better way to define the EventEmitter type:EventEmitter<undefined>
or EventEmitter<void>
.
void
is better because there is no an argument in .emit()
call. undefined
is better .emit()
is the same .emit(undefined)
What is your opinion?
Conclusion. Use Eventemitter when transferring data from child component to parent component. Use Subject to transfer data from one component to another component.
EventEmitterlink. Use in components with the @Output directive to emit custom events synchronously or asynchronously, and register handlers for those events by subscribing to an instance.
For passing the parameters, we will wrap all the parameters inside the curly brackets (this will combine them as a single object) and pass it to the emit method. To receive the parameters in the parent component, we will make a similar type of object and update its value with that of the received object.
Step 1: Import output and EventEmitter from angular/core in your ts file. Step 2: Add a property with @Output decorator which has a type of EventEmitter. Step 3:Create an add method in the same component ts file So, your ts file will look like this: Child. component.
Like this: EventEmitter<undefined> or EventEmitter<void>. void is better because there is no an argument in .emit () call. What is your opinion? Show activity on this post. According to the TypeScript docs, the void type accepts both undefined and null - therefore, the following code would be valid:
If an error occurs within an EventEmitter instance, then the typical action is for an ‘error’ event to be emitted. It supports EventListener objects and functions as handlers for all event types. All EventEmitter emit the event ‘ newListener ’, when new listeners are added and ‘removeListener’ when listeners are removed.
This is typically done via “events”, hence our “EventEmitter” and is designed around a uni-directional data flow system that adopts a much more reasonable approach to application development. Let’s finalise the basics of parent-child and child-parent communication by introducing EventEmitter and @Output.
Let’s finalise the basics of parent-child and child-parent communication by introducing EventEmitter and @Output. This tutorial will cover stateless component events using the EventEmitter API and @Output decorator. These allow us to emit change or any custom event names from a custom component in Angular.
According to the TypeScript docs, the void
type accepts both undefined
and null
- therefore, the following code would be valid:
@Component( ... ) class MyComponent { @Output() public cancel = new EventEmitter<void>(); private myFoo() { this.cancel.emit(); this.cancel.emit(undefined); this.cancel.emit(null); } }
Whereas with EventEmitter<undefined>
, you would only be able to pass undefined
or no argument, which is probably more correct in your case - that said, I can't see any major issues occurring just because you passed null
to an emitter that you're not expecting a value from anyway, so I'd be tempted to choose void
since it's the shorter option.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With