Component Communication (@Input(), @Output())

🔹 @Input() – Passing Data from Parent to Child

Use @Input() when the parent component needs to send data to its child.

✅ Example:

parent.component.html

<app-child [message]="parentMessage"></app-child>

parent.component.ts

export class ParentComponent {
  parentMessage = 'Hello from Parent!';
}

child.component.ts

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

@Component({
  selector: 'app-child',
  template: `<p>{{ message }}</p>`
})
export class ChildComponent {
  @Input() message: string = '';
}

---

🔸 @Output() – Sending Data from Child to Parent

Use @Output() when the child component needs to emit an event back to the parent.

✅ Example:

child.component.ts

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

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

  sendMessage() {
    this.messageEvent.emit('Hi Parent!');
  }
}

parent.component.html

<app-child (messageEvent)="receiveMessage($event)"></app-child>
<p>{{ childMessage }}</p>

parent.component.ts

export class ParentComponent {
  childMessage = '';

  receiveMessage(msg: string) {
    this.childMessage = msg;
  }
}

---

🧠 Summary

Decorator	Direction	Use Case
@Input()	Parent ➡️ Child	Pass data from parent to child
@Output()	Child ➡️ Parent	Emit events from child to parent

---