{"id":201117,"date":"2025-04-04T06:08:36","date_gmt":"2025-04-04T06:08:36","guid":{"rendered":"https:\/\/namso-gen.co\/blog\/how-to-get-emitted-value-in-angular\/"},"modified":"2025-04-04T06:08:36","modified_gmt":"2025-04-04T06:08:36","slug":"how-to-get-emitted-value-in-angular","status":"publish","type":"post","link":"https:\/\/namso-gen.co\/blog\/how-to-get-emitted-value-in-angular\/","title":{"rendered":"How to get emitted value in Angular?"},"content":{"rendered":"

One of the key features of Angular is the ability to emit values from child components to parent components. This allows for communication between different parts of an application. To get the emitted value in Angular, you can use the EventEmitter class to emit values from the child component, and subscribe to the emitted event in the parent component. <\/p>\n

Here’s a step-by-step guide on how to achieve this:<\/p>\n

1. In the child component, define an output property using the @Output decorator and EventEmitter class to emit the value. For example:
\n“`typescript
\n@Output() valueEmitted = new EventEmitter();
\n“`<\/p>\n

2. In the child component, when you want to emit a value, use the emit method of the EventEmitter class. For example:
\n“`typescript
\nthis.valueEmitted.emit(‘Hello from child component’);
\n“`<\/p>\n

3. In the parent component, use the event binding syntax to listen for the emitted event and call a method when the event is emitted. For example:
\n“`html
\n<\/app-child>
\n“`<\/p>\n

4. In the parent component class, define the onValueEmitted method to receive the emitted value. For example:
\n“`typescript
\nonValueEmitted(value: string) {
\n console.log(value);
\n}
\n“`<\/p>\n

\n
\n

Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n