Understanding Input and Output Decorator in Angular

In Angular, @Input() and @Output() are decorators used to communicate between parent and child components.

• @Input() allows a parent component to pass data into a child component.
• @Output() allows a child component to send events or data out to the parent component.

This helps components work together in a modular and reusable way.

How @Input() works:

The child component defines a property decorated with @Input(). The parent binds a value to that property when using the child component’s selector.

Example:

child.component.ts

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

@Component({
  selector: 'app-child',
  template: `<p>Message from parent: {{ message }}</p>`
})
export class ChildComponent {
  @Input() message!: string;  // receive data from parent
}

parent.component.html

<app-child [message]="'Hello from Parent!'"></app-child>

Here, the parent sends the string "Hello from Parent!" to the child’s message property.

How @Output() works:

The child component defines an EventEmitter property decorated with @Output(). When the child wants to notify the parent, it emits an event.

Example:

child.component.ts

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

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

  sendNotification() {
    this.notify.emit('Message from Child!');
  }
}

parent.component.html

<app-child (notify)="onNotify($event)"></app-child>
<p>{{ messageFromChild }}</p>

parent.component.ts

export class ParentComponent {
  messageFromChild: string = '';

  onNotify(message: string) {
    this.messageFromChild = message;
  }
}

In this example:

• The child emits the notify event when the button is clicked.
• The parent listens to (notify) and runs onNotify(), receiving data from the child.

Summary

• @Input() passes data from parent to child as a property binding.
• @Output() passes events from child to parent as event bindings.

These two decorators are key to Angular component interaction, making data flow clear and manageable.