Angular 8 @Output EventEmitter: Emitting an Object instead of Primitive Data Types

Introduction

In Angular 8, the @Output decorator along with the EventEmitter class allows you to emit events from a child component to its parent component. By default, the EventEmitter is designed to work with primitive data types such as strings or numbers. However, there might be scenarios where you need to emit an object instead of a primitive data type. In this blog post, we will explore how to emit an object using the @Output EventEmitter in Angular 8.

Understanding the Issue

Let’s start by examining a specific scenario where emitting an object becomes a challenge. Suppose we have a child component with the following code snippet:

code



export class MyChildComponent implements OnInit {
  @Output() childEventEmitter: EventEmitter<any> = new EventEmitter<any>();
  // ...
}

In the emitter function, we try to emit an object named “amount” to the parent component:

code

const amount = { currency: 'USD', total: '10.25' };
this.childEventEmitter.emit(amount);

However, when we try to compile the code, we encounter an error:

code
Argument of type { currency: 'USD', total: '10.25' } not assignable to parameter of type string

This error occurs because the EventEmitter is not able to infer the type of the emitted object automatically.

Specifying Object Type

To overcome this issue, we can explicitly specify the type of the emitted object in the @Output decorator. Modify the child component code as follows:

code



export class MyChildComponent implements OnInit {
  @Output() childEventEmitter: EventEmitter<{ currency: string, total: string }> = new EventEmitter<{ currency: string, total: string }>();
  // ...
}

Now, when we emit the object in the emitter function, the compiler will recognize the specified type:

code
const amount = { currency: 'USD', total: '10.25' };
this.childEventEmitter.emit(amount);

Understanding the Error

The error message “Argument of type { currency: ‘USD’, total: ‘10.25’ } not assignable to parameter of type string” indicates that the EventEmitter is unable to infer the type of the emitted object automatically. To resolve this issue, we need to specify the object type explicitly.

Specifying Object Type

To emit an object instead of primitive data types, modify the child component code as follows:

code



export class MyChildComponent implements OnInit {
  @Output() childEventEmitter: EventEmitter<{ currency: string, total: string }> = new EventEmitter<{ currency: string, total: string }>();
  // ...
}

By explicitly specifying the object type in the @Output decorator, you inform the compiler about the expected structure of the emitted object. Now, when emitting the object in the emitter function, the compiler will recognize the specified type, allowing the object to be successfully emitted.

Import Correct EventEmitter

Another potential cause of the error is importing the EventEmitter from the wrong package. Ensure that you import the EventEmitter class from the ‘@angular/core’ package rather than from any other package (such as Protractor). Importing from the correct package ensures the proper functionality of the EventEmitter.

Conclusion

In this blog post, we addressed the error that occurs when trying to emit objects using the @Output EventEmitter in Angular 8. By specifying the object type explicitly and ensuring the correct import of the EventEmitter class, you can overcome this error and successfully emit objects from child components to parent components.

I hope this article has provided you with practical solutions to resolve the object emission error in Angular 8. Apply these solutions in your projects to enhance the functionality and effectiveness of your Angular applications.