---
title: "Explain the @Output in Angular."  
description: "Explain the @Output in Angular."  
author: "Anubhav Sharma"  
published: 2025-12-22  
updated: 2025-12-22  
canonical: https://www.mindstick.com/interview/34427/explain-the-output-in-angular  
category: "angular js"  
tags: ["angular js", "front-end development"]  
reading_time: 4 minutes  

---

# Explain the @Output in Angular.

In **Angular**, `@Output()` is used to **send data or events from a child component to its parent component**.

> `@Output()` **allows a child component to emit events that the parent component can listen to and react to.**

Think of it as:

> ## Child → Parent communication

## Why `@Output` is Needed

Angular components are **isolated**. A child component **cannot directly change** parent data.

So Angular provides:

- `@Input()` → Parent ➜ Child
- `@Output()` → Child ➜ Parent

## Basic Definition

```javascript
@Output() eventName = new EventEmitter<T>();
```

- `@Output()` marks an **event**
- `EventEmitter` emits data
- Parent listens using **event binding**

## Simple Example

### Child Component

```javascript
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <button (click)="sendData()">Send to Parent</button>
  `
})
export class ChildComponent {
  @Output() message = new EventEmitter<string>();

  sendData() {
    this.message.emit('Hello Parent!');
  }
}
```

### Parent Component

```html
<app-child (message)="receiveMessage($event)"></app-child>
```

```javascript
export class ParentComponent {
  receiveMessage(data: string) {
    console.log(data); // Hello Parent!
  }
}
```

## How It Works (Internally)

- Child emits event:

```javascript
this.message.emit(value);
```

- Parent listens:

```javascript
(message)="receiveMessage($event)"
```

- `$event` contains emitted value

## Custom Event Names

```javascript
@Output('close') closePopup = new EventEmitter<void>();
```

```html
<app-child (close)="onClose()"></app-child>
```

## Emitting Objects

```javascript
@Output() userSelected = new EventEmitter<User>();
this.userSelected.emit({ id: 1, name: 'Anna' });
```

```html
<app-child (userSelected)="onUser($event)"></app-child>
```

## `@Output` vs Callback Function

Bad practice:

```plaintext
@Input() callback!: Function;
```

Correct Angular way:

```plaintext
@Output() action = new EventEmitter();
```

## Best Practices

- Use `@Output` **only for events**, not data storage
- Keep event names **verb-based** (`saved`, `deleted`)
- Avoid heavy logic inside child
- Prefer `Observable` for complex streams

## Real-World Example

- Modal close button
- Form submit event
- Delete confirmation
- Dropdown selection change
- Summary (One Line)

## Answers

### Answer by Anubhav Sharma

In **Angular**, `@Output()` is used to **send data or events from a child component to its parent component**.

> `@Output()` **allows a child component to emit events that the parent component can listen to and react to.**

Think of it as:

> ## Child → Parent communication

## Why `@Output` is Needed

Angular components are **isolated**. A child component **cannot directly change** parent data.

So Angular provides:

- `@Input()` → Parent ➜ Child
- `@Output()` → Child ➜ Parent

## Basic Definition

```javascript
@Output() eventName = new EventEmitter<T>();
```

- `@Output()` marks an **event**
- `EventEmitter` emits data
- Parent listens using **event binding**

## Simple Example

### Child Component

```javascript
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <button (click)="sendData()">Send to Parent</button>
  `
})
export class ChildComponent {
  @Output() message = new EventEmitter<string>();

  sendData() {
    this.message.emit('Hello Parent!');
  }
}
```

### Parent Component

```html
<app-child (message)="receiveMessage($event)"></app-child>
```

```javascript
export class ParentComponent {
  receiveMessage(data: string) {
    console.log(data); // Hello Parent!
  }
}
```

## How It Works (Internally)

- Child emits event:

```javascript
this.message.emit(value);
```

- Parent listens:

```javascript
(message)="receiveMessage($event)"
```

- `$event` contains emitted value

## Custom Event Names

```javascript
@Output('close') closePopup = new EventEmitter<void>();
```

```html
<app-child (close)="onClose()"></app-child>
```

## Emitting Objects

```javascript
@Output() userSelected = new EventEmitter<User>();
this.userSelected.emit({ id: 1, name: 'Anna' });
```

```html
<app-child (userSelected)="onUser($event)"></app-child>
```

## `@Output` vs Callback Function

Bad practice:

```plaintext
@Input() callback!: Function;
```

Correct Angular way:

```plaintext
@Output() action = new EventEmitter();
```

## Best Practices

- Use `@Output` **only for events**, not data storage
- Keep event names **verb-based** (`saved`, `deleted`)
- Avoid heavy logic inside child
- Prefer `Observable` for complex streams

## Real-World Example

- Modal close button
- Form submit event
- Delete confirmation
- Dropdown selection change
- Summary (One Line)


---

Original Source: https://www.mindstick.com/interview/34427/explain-the-output-in-angular

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.