#11 @Output

 

Understanding @Output() in Angular 19

The @Output() decorator in Angular 19 is used to send data from a child component to a parent component. It allows child components to emit events, which the parent component can listen to and respond to.

---

Step-by-Step Guide with Example

We will create a simple Angular 19 project where a child component emits an event, and the parent component listens for it.

---

Step 1: Create a New Angular 19 Project

Ensure you have Angular CLI installed:

npm install -g @angular/cli@latest

Now, create a new Angular project:

ng new angular-output-demo
cd angular-output-demo
ng serve

---

Step 2: Generate a Child Component

Create a new child component that will emit an event to the parent:

ng generate component components/child

This creates:

• child.component.ts
• child.component.html
• child.component.scss

---

Step 3: Implement @Output() in the Child Component

Modify child.component.ts:

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent {
  // Define an EventEmitter to send data to the parent
  @Output() messageEvent = new EventEmitter<string>();

  sendMessage() {
    this.messageEvent.emit('Hello from Child Component!');
  }
}

---

Step 4: Update the Child Component Template

Modify child.component.html:

<div class="child-container">
  <h3>Child Component</h3>
  <button (click)="sendMessage()">Send Message to Parent</button>
</div>

---

Step 5: Listen for Events in the Parent Component

Modify app.component.ts to receive the event:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  receivedMessage: string = '';

  // Method to handle event from child
  onMessageReceived(message: string) {
    this.receivedMessage = message;
  }
}

---

Step 6: Update the Parent Component Template

Modify app.component.html:

<h2>Parent Component</h2>
<p><strong>Message from Child:</strong> {{ receivedMessage }}</p>

<!-- Pass event listener to the child -->
<app-child (messageEvent)="onMessageReceived($event)"></app-child>

---

Step 7: Add Some Styling (Optional)

Modify child.component.scss:

.child-container {
  border: 2px solid #007bff;
  padding: 15px;
  margin: 10px;
  border-radius: 8px;
  text-align: center;
  background-color: #f0f8ff;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 5px;
}

button:hover {
  background-color: #0056b3;
}

---

Step 8: Run the Project

Start the Angular application:

ng serve

Open the browser at http://localhost:4200, click the "Send Message to Parent" button, and see the message update in the parent component.

---

Key Takeaways

✅ @Output() allows child components to send data to parent components.
✅ EventEmitter<T> is used to emit events with a specific data type.
✅ The parent listens for the emitted event using event binding:

<app-child (messageEvent)="onMessageReceived($event)"></app-child>

Would you like to modify this example to pass more complex data like objects or arrays? 🚀