Angular Tutorial: Understanding the @Output Decorator 🎯

Introduction 📝

In this lesson, we'll delve into one of the essential decorators in Angular - the @Output decorator. We'll explore what it does, why we use it, and how to implement it with practical examples.

What is the @Output Decorator? 💡

The @Output decorator is used in Angular to create a property (event) in a child component that can be consumed (subscribed) by a parent component. This two-way data binding is crucial for effective communication between parent and child components.

Creating an @Output Decorator Property 💡

Let's create a simple example. We'll build a child component named child-component and a parent component named parent-component.

Step 1: Create the Child Component (`child-component`) 📝

typescript

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

@Component({
  selector: 'app-child-component',
  template: `
    <button (click)="onButtonClicked()">Click me!</button>
  `
})
export class ChildComponent {
  @Output() buttonClicked = new EventEmitter();

  onButtonClicked() {
    this.buttonClicked.emit();
  }
}

In the above code:

@Component is a decorator used to create an Angular component.
EventEmitter is a class provided by Angular to emit events.
@Output() buttonClicked = new EventEmitter(); declares an output event property buttonClicked.
onButtonClicked() function is called when the button is clicked, emitting the event using this.buttonClicked.emit();.

Step 2: Create the Parent Component (`parent-component`) 📝

typescript

import { Component } from '@angular/core';
import { ChildComponent } from './child-component';

@Component({
  selector: 'app-parent-component',
  template: `
    <app-child-component (buttonClicked)="onButtonClicked($event)"></app-child-component>
    <p>Button clicked!</p>
  `
})
export class ParentComponent {
  onButtonClicked(event: any) {
    console.log('Button clicked in the parent component!');
  }
}

In the above code:

(buttonClicked)="onButtonClicked($event)" is an event binding in the template, subscribing to the buttonClicked event emitted by the child component.
onButtonClicked(event: any) function is called when the buttonClicked event is emitted, logging a message to the console.

Practical Application 💡

Now that you've learned the basics, let's see how to create a more practical example. Consider a form where the user can add a new item. The child component (add-item-component) handles the form, and the parent component (items-list-component) displays the list of items.

typescript

// add-item-component
import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-add-item',
  template: `
    <form (ngSubmit)="onFormSubmit()">
      <input type="text" [(ngModel)]="newItem">
      <button type="submit">Add Item</button>
    </form>
  `
})
export class AddItemComponent {
  @Output() itemAdded = new EventEmitter<string>();

  newItem: string = '';

  onFormSubmit() {
    this.itemAdded.emit(this.newItem);
    this.newItem = '';
  }
}

// items-list-component
import { Component } from '@angular/core';
import { AddItemComponent } from './add-item-component';

@Component({
  selector: 'app-items-list',
  template: `
    <ul>
      <li *ngFor="let item of items">{{ item }}</li>
    </ul>
    <app-add-item (itemAdded)="addItem($event)"></app-add-item>
  `
})
export class ItemsListComponent {
  items: string[] = [];

  addItem(item: string) {
    this.items.push(item);
  }
}

Angular Tutorial: Understanding the @Output Decorator 🎯

Angular Tutorial: Understanding the @Output Decorator 🎯

Introduction 📝

What is the @Output Decorator? 💡

Creating an @Output Decorator Property 💡

Step 1: Create the Child Component (child-component) 📝

Step 2: Create the Parent Component (parent-component) 📝

Practical Application 💡

Quiz 📝

Step 1: Create the Child Component (`child-component`) 📝

Step 2: Create the Parent Component (`parent-component`) 📝