Using EventEmitter with @Output

In the previous post, we saw what EventEmitters are and how they are used in combination with @Output decorator to handle communicate from Child component to the Parent component. In this post, we shall see a full example of how this is implemented.

In the example, we have a ParentComponent and a ChildComponent, the child component has a button and a @Output decorator. In the buttons click event, we will trigger the emit event of the EventEmitter associated with the @Output parameter, we will also send a payload along with the emit.

What are EventEmitters?

Angular applications are made using Components, most often we will have to arrange the components in a hierarchy (parent/child components). We will have to pass values from the parent to child components and from the child to parent component to make the App functional.

To pass values from a parent component to a child component we use the @Input property/decorator.
To pass values from a child component to a parent component we need to emit an event using @Output and EventEmitter. Both are parts of the @angular/core.

Observable in Angular

Angular internally uses Observables for different features, which needs to listen to specific sources and trigger actions based on specific events/values. Angular uses Observables for the following.