Angular Component Communication

A real application contains many components, and they must share information. A product list needs to tell a product card which item to show. A product card needs to tell the list when a visitor clicks Buy. Angular provides clear paths for this conversation.

The Parent and Child Idea

A parent component places a child component inside its template. Picture a teacher and a student. The teacher hands a worksheet to the student. The student raises a hand to report a question. Data moves down with an input. Events move up with an output.

+-------------------------------+
|        PARENT COMPONENT       |
|                               |
|   +-----------------------+   |
|   |    CHILD COMPONENT    |   |
|   +-----------------------+   |
|        ^             |        |
|  Output event    Input data   |
|  (child to       (parent to   |
|   parent)         child)      |
+-------------------------------+

Send Data Down with Input

The child declares a property that accepts data. The parent fills that property with a value.

// child: product-card.component.ts
import { Component, input } from '@angular/core';

@Component({
  selector: 'app-product-card',
  template: '<p>{{ name() }}</p>'
})
export class ProductCardComponent {
  name = input<string>('');
}

// parent template
<app-product-card [name]="'Notebook'"></app-product-card>

Square brackets around name tell Angular to pass a value. The child reads the value by calling name() like a function.

Required Inputs

Some data must always arrive. Use input.required and Angular shows an error at build time when the parent forgets the value.

name = input.required<string>();

Send Events Up with Output

The child creates an output and fires it when something happens. The parent listens with parentheses.

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

@Component({
  selector: 'app-buy-button',
  template: '<button (click)="buy()">Buy</button>'
})
export class BuyButtonComponent {
  bought = output<string>();

  buy() {
    this.bought.emit('Notebook');
  }
}

// parent template
<app-buy-button (bought)="onBought($event)"></app-buy-button>

The word $event holds the value that the child sent. The parent method receives it as a normal argument.

Two-Way Sharing with Model

Some pieces need data to move both ways, such as a text box that the parent also controls. The model function creates a value that flows in both directions. The parent uses the banana-in-a-box syntax [(value)].

// child
import { model } from '@angular/core';
value = model<string>('');

// parent template
<app-search-box [(value)]="searchText"></app-search-box>

Share Data Through a Service

Components that sit far apart cannot use inputs and outputs easily. Think of two people in different buildings. They use a shared notice board instead of passing notes through every room between them. A service acts as that notice board.

+-----------+        +-------------+        +-----------+
| Component |  -->   |   Service   |  -->   | Component |
|     A     | writes | (shared     | reads  |     B     |
|           |        |  storage)   |        |           |
+-----------+        +-------------+        +-----------+

Both components request the same service. One writes a value, and the other reads it. The Services lesson explains how to build one.

Choose the Right Path

Real-Life Example

Think of an online grocery page. The product list holds many items, and each item appears as a small card. The list passes the product name and price into each card through inputs. Each card shows an Add to Cart button. A click sends an output event upward, and the list updates the cart total. Every card stays simple because it only displays data and reports clicks. The list stays in charge of the cart.

Tips for Clean Communication

Give inputs and outputs short, meaningful names. Avoid changing input data inside the child, because the parent owns that data. Send small values instead of whole objects when possible. These habits keep the flow of data easy to follow.

Key Points

• Inputs carry data from parent to child.
• Outputs carry events from child to parent.
• Model supports two-way sharing.
• Services connect components that have no direct relationship.