🏠 Component Communication in Angular

How Components Talk to Each Other (Like Family Members!)

🎭 The Family Metaphor

Imagine your Angular app is a house with family members living in different rooms.

• Parent Component = Mom or Dad (the boss!)
• Child Component = Kids (they listen AND speak up!)
• Service = The family phone (everyone can use it to talk!)

Components need to share information. Just like family members call each other for dinner or ask for help with homework!

📬 What is Component Communication?

In Angular, your app is made of components. Each component is like a LEGO brick. They need to share data and send messages to work together.

Real Life Example:

• A shopping cart page has a Product List (parent)
• Each Product Card is a child
• When you click “Add to Cart”, the child tells the parent!

graph TD
    A[Parent Component] -->|Sends Data Down| B[Child Component]
    B -->|Sends Events Up| A

⬇️ The @Input Decorator

Sending Data DOWN (Parent → Child)

Think of @Input like a gift box that parents give to their children.

Simple Example:

Parent says: “Here’s your allowance money!”

Child receives: The money in their @Input pocket.

Code Example:

child.component.ts

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

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

parent.component.html

<app-child [name]="'Tommy'"></app-child>

What Happens?

1. Parent has data: 'Tommy'
2. Parent passes it to child using [name]
3. Child receives it in @Input() name
4. Child displays: “My name is Tommy”

🎯 Key Point:

Data flows DOWN like water falling from a waterfall!

⬆️ The @Output Decorator

Sending Events UP (Child → Parent)

Think of @Output like a walkie-talkie that children use to call their parents.

Simple Example:

Child says: “Mom! I finished my homework!”

Parent hears: The message through @Output!

Code Example:

child.component.ts

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

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

  sendMessage() {
    this.notify.emit('Hello from child!');
  }
}

parent.component.html

<app-child (notify)="onNotify($event)">
</app-child>

parent.component.ts

onNotify(message: string) {
  console.log(message);
  // Prints: "Hello from child!"
}

🎯 Key Point:

Events flow UP like bubbles rising in water!

📢 EventEmitter

The Magic Messenger!

EventEmitter is the actual messenger that carries your message from child to parent.

Think of it like a paper airplane that flies from the child’s room to the parent’s room!

How It Works:

graph LR
    A[Child clicks button] --> B[EventEmitter.emit]
    B --> C[Message flies UP]
    C --> D[Parent catches it]

Three Steps:

1. Create the emitter:

@Output() buttonClicked = new EventEmitter<string>();

2. Send a message:

this.buttonClicked.emit('I was clicked!');

3. Listen in parent:

<app-child (buttonClicked)="handleClick($event)">
</app-child>

You Can Send Anything!

• Strings: emit('hello')
• Numbers: emit(42)
• Objects: emit({id: 1, name: 'Tom'})

🧠 Smart vs Dumb Components

The Brain and The Body!

Imagine your body:

• Brain = Smart Component (thinks, makes decisions)
• Hands = Dumb Component (just does what brain says)

Smart Components (Container Components)

These are the bosses. They:

• ✅ Talk to services
• ✅ Fetch data from APIs
• ✅ Make decisions
• ✅ Pass data to dumb components

Dumb Components (Presentational Components)

These are the workers. They:

• ✅ Just display data
• ✅ Receive data via @Input
• ✅ Send events via @Output
• ✅ Don’t know where data comes from

Visual Example:

graph TD
    A[Smart: UserListContainer] -->|users array| B[Dumb: UserCard]
    A -->|users array| C[Dumb: UserCard]
    B -->|delete event| A
    C -->|delete event| A
    A <-->|fetch users| D[UserService]

Code Example:

Smart Component (knows everything)

@Component({
  selector: 'app-user-list',
  template: `
    <app-user-card
      *ngFor="let user of users"
      [user]="user"
      (delete)="onDelete($event)">
    </app-user-card>
  `
})
export class UserListComponent {
  users: User[] = [];

  constructor(private userService: UserService) {
    this.users = this.userService.getUsers();
  }

  onDelete(userId: number) {
    this.userService.delete(userId);
  }
}

Dumb Component (just shows data)

@Component({
  selector: 'app-user-card',
  template: `
    <div class="card">
      <h3>{{ user.name }}</h3>
      <button (click)="onDeleteClick()">
        Delete
      </button>
    </div>
  `
})
export class UserCardComponent {
  @Input() user!: User;
  @Output() delete = new EventEmitter<number>();

  onDeleteClick() {
    this.delete.emit(this.user.id);
  }
}

🎯 Why This Pattern?

📞 Service Communication

The Family Phone Everyone Can Use!

What if two components are NOT parent-child? Like two cousins who live in different houses?

Solution: Use a SERVICE!

A service is like a phone line that any component can call!

graph TD
    A[Component A] <-->|calls| S[Shared Service]
    B[Component B] <-->|calls| S
    C[Component C] <-->|calls| S

Simple Service Example:

message.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MessageService {
  private message = new BehaviorSubject<string>('Hello!');

  currentMessage = this.message.asObservable();

  changeMessage(newMessage: string) {
    this.message.next(newMessage);
  }
}

sender.component.ts

@Component({
  selector: 'app-sender',
  template: `
    <button (click)="send()">
      Send Message
    </button>
  `
})
export class SenderComponent {
  constructor(private msgService: MessageService) {}

  send() {
    this.msgService.changeMessage('Hi from Sender!');
  }
}

receiver.component.ts

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

  constructor(private msgService: MessageService) {
    this.msgService.currentMessage.subscribe(
      msg => this.message = msg
    );
  }
}

What Happens?

1. Sender clicks button
2. Service updates the message
3. Receiver automatically gets the new message
4. Magic! 🎉

🎯 Quick Summary

🌟 Remember The Family!

Parent (Smart) gives gifts → @Input → Child (Dumb) receives
Child (Dumb) sends message → @Output + EventEmitter → Parent hears
Cousins talk → Service → Everyone connected!

You now understand how Angular components talk to each other!

The house is harmonious. Everyone communicates. Your app works beautifully! 🏠✨