1. What Is a Parent Component in Angular?

What is a Parent Component?

A parent component is a component that contains or uses another component inside its template.

The component used inside it is called the child component.

For example:

ProductList   ← Parent Component
     │
     ├── Product
     ├── Product
     └── Product
           ↑
      Child Components

If ProductList uses <app-product>, then:

• ProductList = Parent
• Product = Child

Why Do We Need Parent Components?

Angular applications are divided into smaller components instead of putting the entire UI into one large component.

A parent component can:

• Organize child components.
• Pass data to children.
• Receive events from children.
• Coordinate multiple children.
• Maintain data needed by a group of child components.

For example:

ProductList
   │
   ├── Product 1
   ├── Product 2
   └── Product 3

ProductList can maintain the products, while each Product component is responsible for displaying one product.

Purpose

The parent component commonly acts as a container or coordinator.

For example:

ProductList
     │
     │ product data
     ▼
Product

The parent may:

1. Get product data.
2. Pass a product to the child.
3. Listen for events from the child.
4. Update the application when an event occurs.

Code Sample

Consider two components:

ProductList → Parent
Product     → Child

Parent – product-list.ts

import { Component } from '@angular/core';
import { Product } from '../product/product';

@Component({
  selector: 'app-product-list',
  imports: [Product],
  templateUrl: './product-list.html'
})
export class ProductList {

  productName = 'Laptop';
}

Parent Template – product-list.html

<h1>Product List</h1>

<app-product
    [name]="productName">
</app-product>

The important part is:

<app-product></app-product>

Because ProductList contains the Product component, ProductList becomes its parent.

Parent Passing Data to Child

The parent has:

productName = 'Laptop';

It passes the value to the child:

<app-product
    [name]="productName">
</app-product>

Flow:

Parent Component

ProductList
productName = "Laptop"
       │
       │ [name]
       ▼
Child Component

Product

This is Parent → Child communication.

2. What Is a Child Component in Angular?

What is a Child Component?

A child component is a component that is used inside another component's template.

For example:

<app-product></app-product>

If this appears inside ProductList's template:

ProductList
     │
     └── Product

then Product is the child of ProductList.

Why Do We Need Child Components?

Child components allow us to break large UIs into smaller and reusable pieces.

Imagine putting everything inside ProductList:

Product List
Product Name
Product Image
Product Price
Product Description
Add to Cart
Rating
Stock
...

As the application grows, the component becomes difficult to maintain.

Instead:

ProductList
     │
     ├── Product
     ├── Product
     └── Product

Each Product component handles one product.

Purpose

A child component normally handles a specific portion of the parent's UI.

For example:

ProductList
     │
     └── Product
          │
          ├── Name
          ├── Price
          ├── Image
          └── Add to Cart

The child can:

• Receive data from its parent.
• Display that data.
• Handle user actions.
• Send events back to the parent.
• Be reused multiple times.

Child Component Code

product.ts

Using modern Angular's input():

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

@Component({
  selector: 'app-product',
  templateUrl: './product.html'
})
export class Product {

  name = input<string>();
}

product.html

<h2>{{ name() }}</h2>

The parent sends:

Laptop

and the child displays:

Laptop

Complete Parent → Child Flow

Parent

export class ProductList {
  productName = 'Laptop';
}

Parent HTML

<app-product
    [name]="productName">
</app-product>

Child

export class Product {
  name = input<string>();
}

Child HTML

<h2>{{ name() }}</h2>

Flow:

              Parent Component
                ProductList
                     │
                     │
           productName = "Laptop"
                     │
                     │ [name]
                     ▼
               Child Component
                  Product
                     │
                     │ name()
                     ▼
                  Template
                     │
                     ▼
                   Laptop

Child Sending an Event to Parent

The relationship can work in both directions.

Parent
   │
   │ Input
   ▼
Child
   │
   │ Output
   ▼
Parent

For example, the child has an Add button.

Child

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

@Component({
  selector: 'app-product',
  template: `
    <button (click)="addToCart()">
      Add to Cart
    </button>
  `
})
export class Product {

  productAdded = output<string>();

  addToCart() {
    this.productAdded.emit('Laptop');
  }
}

Parent listens:

<app-product
    (productAdded)="onProductAdded($event)">
</app-product>

Parent method:

onProductAdded(product: string) {
  console.log(product);
}

Flow:

Parent
  │
  │ data
  ▼
Child
  │
  │ event
  ▼
Parent

Parent vs Child Component

Example:

<app-product></app-product>

If this appears in ProductList:

ProductList = Parent
Product     = Child

Important Point: Parent/Child Is a Relationship

A component is not permanently a parent or permanently a child.

Consider:

App
 │
 ▼
ProductList
 │
 ▼
Product

Here:

App

Parent of:

ProductList

ProductList

It is both:

Child of App

AND

Parent of Product

Product

Child of:

ProductList

Therefore, parent and child describe the relationship between components, not a special component type.

Real Application Example

Consider an e-commerce application:

App
│
├── Header
│
│    └── CartIcon
│
├── ProductList
│    │
│    ├── ProductCard
│    ├── ProductCard
│    └── ProductCard
│
└── Footer

Relationships:

App
 └── Parent of Header

Header
 └── Child of App
 └── Parent of CartIcon

ProductList
 └── Child of App
 └── Parent of ProductCard

This forms a component tree.

Advantages

Reusability

A child component can be reused:

<app-product></app-product>
<app-product></app-product>
<app-product></app-product>

Maintainability

Large UI functionality can be divided into smaller components.

Separation of Responsibilities

The parent can manage data while children handle specific UI responsibilities.

Easier Testing

Individual parent and child components can be tested separately.

Clear Data Flow

Angular provides clear mechanisms for:

Parent → Child
Child  → Parent

Disadvantages

Deep Component Hierarchies

Too much nesting can become difficult to understand:

App
 ↓
A
 ↓
B
 ↓
C
 ↓
D

Too Many Inputs and Outputs

Deeply nested components may require passing data through components that don't actually use it.

Tight Coupling

If a parent directly controls too many internal details of its child, the components become tightly coupled.

Poor Component Design

Creating too many tiny components can make a simple application unnecessarily complex.

Key Points

• A parent component contains another component in its template.
• A child component is used inside another component's template.
• Parent and child are relationships, not special Angular component types.
• A component can simultaneously be a parent and a child.
• Parent → Child data is commonly passed using:

input()

or traditional:

@Input()

• Child → Parent communication commonly uses:

output()

or traditional:

@Output()

The easiest way to remember:

          PARENT
             │
             │ Input
             ▼
           CHILD
             │
             │ Output
             ▼
          PARENT

Interview Questions & Answers

Q1. What is a parent component?

A parent component is a component that contains or uses another component inside its template.

For example:

<app-product></app-product>

If this is inside ProductList, then ProductList is the parent.

Q2. What is a child component?

A child component is a component that is used inside another component's template.

If Product is used inside ProductList, then Product is the child component.

Q3. How does a parent communicate with a child?

The parent commonly passes data to the child using an input.

Modern Angular:

name = input<string>();

Traditional Angular:

@Input()
name = '';

Q4. How does a child communicate with its parent?

The child can emit an event using an output.

Modern Angular:

saved = output<string>();

Traditional Angular:

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

Q5. Can a component be both parent and child?

Yes.

For example:

App
 │
 ▼
ProductList
 │
 ▼
Product

ProductList is:

• Child of App
• Parent of Product

Q6. Does Angular have a special ParentComponent or ChildComponent type?

No. They are normal Angular components. Parent and child simply describe their relationship in the component tree.

Q7. What is a component tree?

A component tree represents the hierarchical relationship between Angular components.

App
├── Header
│   └── Cart
├── ProductList
│   └── Product
└── Footer

Each component can have parent and child relationships depending on where it is used.