TypeScript 2.x By Example

Passing data from a child component to the parent component

We saw that, using @Input, Angular allows us to pass data from parent to child; similarly, we have the @Output decorator to pass the data back from the child to the parent. The main difference is that we can output only one event from the child component to the parent component.

The child component exposes an event and decorates it with the @Output property. In Angular, an event is exposed using EventEmitter, as shown in the following code snippet:

 @Output() public onAddsubTask: EventEmitter<SubTask>;

Here we created an output parameter of the EventEmitter type in our task component. Here, we can also see how the generics are used by Angular. 

EventEmitter is of a generic type ...