Backend interview prep

Start

Component Communication in Angular

Learn Angular Component Communication in detail with @Input(), @Output(), ViewChild, Template Reference Variables, Shared Services, RxJS Subjects, Signals, architecture diagrams, real-world examples, and interview questions.

Angular applications are built using multiple reusable components. However, these components rarely work in isolation—they often need to exchange data and events.

For example:

  • A parent component passes product details to a child component.
  • A child component notifies the parent when a button is clicked.
  • Two unrelated components share user information.
  • A dashboard updates when another component changes application state.

Angular provides multiple techniques for component communication, each suited for different scenarios.

Understanding these communication patterns is essential for building scalable applications and is one of the most frequently asked Angular interview topics.

Table of Contents

  • What is Component Communication?
  • Why Component Communication?
  • Parent to Child Communication
  • Child to Parent Communication
  • Sibling Communication
  • Component Communication Techniques
  • ViewChild
  • Content Projection
  • Signals
  • Best Practices
  • Top 10 Interview Questions
  • Summary

What is Component Communication?

Component Communication is the process of exchanging data, events, or state between Angular components.

Communication may occur between:

  • Parent → Child
  • Child → Parent
  • Sibling ↔ Sibling
  • Unrelated Components
  • Deeply Nested Components

Why Component Communication?

Applications consist of many components working together.

Example:

Dashboard

├── Header

├── Sidebar

├── Product List

├── Shopping Cart

└── Footer

When a user adds an item to the cart:

  • Product List informs Cart
  • Cart updates Header badge
  • Checkout updates Dashboard

All of these require communication.

Component Communication Architecture

flowchart TD

AppComponent

AppComponent --> HeaderComponent

AppComponent --> DashboardComponent

AppComponent --> CartComponent

DashboardComponent --> ProductComponent

ProductComponent --> ProductCard

ProductCard --> CartService

CartService --> CartComponent

CartComponent --> HeaderComponent

Communication Techniques Overview

Technique Direction Best For
@Input() Parent → Child Passing data
@Output() Child → Parent Sending events
ViewChild Parent → Child Direct component access
Template Reference Variable Parent → Child Access template objects
Shared Service Any Component Shared application state
RxJS Subject Any Component Event broadcasting
Signals Any Component Reactive state (Angular 17+)

Parent to Child Communication (@Input)

The most common communication mechanism.

flowchart LR

ParentComponent

ParentComponent -->|"@Input()"| ChildComponent

Parent Component

@Component({
  selector: 'app-parent',
  standalone: true,
  imports: [ChildComponent],
  template: `
      <app-child
          [username]="name">
      </app-child>
  `
})
export class ParentComponent {

    name = "Venu";

}

Child Component

@Component({
  selector: 'app-child',
  standalone: true,
  template: `
      <h2>{{username}}</h2>
  `
})
export class ChildComponent {

    @Input()

    username!: string;

}

Output:

Venu

Parent to Child Flow

sequenceDiagram

participant Parent

participant Child

Parent->>Child: username="Venu"

Child-->>Parent: Render Updated UI

Child to Parent Communication (@Output)

Used when the child sends events to the parent.

flowchart LR

ChildComponent

ChildComponent -->|"@Output()"| ParentComponent

Child Component

@Output()

save = new EventEmitter<string>();

submit(){

    this.save.emit("Profile Saved");

}

Parent Component

<app-child

(save)="saveProfile($event)">

</app-child>

saveProfile(message:string){

    console.log(message);

}

Child to Parent Flow

sequenceDiagram

participant Child

participant Parent

Child->>Parent: save.emit()

Parent->>Parent: Execute saveProfile()

Sibling Communication

Two sibling components should not communicate directly.

Instead, use a shared service.

flowchart LR

ComponentA

ComponentA --> UserService

ComponentB --> UserService

ComponentC --> UserService

Shared Service Example

@Injectable({
  providedIn:'root'
})
export class UserService {

    private username =
        new BehaviorSubject<string>("");

    username$ =
        this.username.asObservable();

    update(name:string){

        this.username.next(name);

    }

}

Sender Component

constructor(private service:UserService){}

update(){

   this.service.update("Angular");

}

Receiver Component

constructor(private service:UserService){}

ngOnInit(){

this.service.username$
.subscribe(data=>{

console.log(data);

});

}

Shared Service Flow

flowchart TD

Sender

Sender --> UserService

UserService --> BehaviorSubject

BehaviorSubject --> ReceiverA

BehaviorSubject --> ReceiverB

BehaviorSubject --> ReceiverC

RxJS Subject vs BehaviorSubject

Subject BehaviorSubject
No initial value Requires initial value
New subscriber gets future values only New subscriber receives latest value immediately
Event broadcasting Shared state
Good for notifications Good for application state

ViewChild Communication

Used when a parent needs direct access to a child component.

flowchart LR

Parent

Parent --> ViewChild

ViewChild --> Child

Example:

@ViewChild(ChildComponent)

child!:ChildComponent;

ngAfterViewInit(){

this.child.refresh();

}

Use cases:

  • Focus input
  • Reset form
  • Call child methods
  • Access child properties

Template Reference Variable

<input #search>

<button

(click)="search.focus()">

Focus

</button>

Useful for simple DOM interactions without writing additional component code.

Content Projection

Angular allows a parent to project custom content into a child using <ng-content>.

Child:

<div class="card">

<ng-content></ng-content>

</div>

Parent:

<app-card>

<h2>Angular</h2>

</app-card>

Content Projection Flow

flowchart LR

ParentHTML

ParentHTML --> NgContent

NgContent --> ChildComponent

ChildComponent --> Browser

Signals (Angular 17+)

Signals provide a modern reactive way to share state.

import { signal } from '@angular/core';

export class UserStore {

    username = signal("Venu");

}

Reading:

{{userStore.username()}}

Updating:

this.userStore.username.set("Angular");

Signals Communication

flowchart TD

Signal

Signal --> ComponentA

Signal --> ComponentB

Signal --> ComponentC

Signals automatically update every consumer when the value changes.

Real-World Banking Example

flowchart TD

Dashboard

Dashboard --> Accounts

Dashboard --> Transactions

Dashboard --> Header

Accounts --> AccountService

Transactions --> AccountService

Header --> AccountService

Scenario:

  • User transfers money.
  • Transaction component updates AccountService.
  • Header updates balance.
  • Dashboard refreshes.
  • Account summary updates automatically.

Choosing the Right Technique

Scenario Recommended Technique
Parent passes data @Input()
Child sends event @Output()
Parent calls child method ViewChild
Unrelated components Shared Service
Application state BehaviorSubject
Modern reactive state Signals
Template interaction Template Reference Variable
Custom content ng-content

Best Practices

  • Prefer @Input() and @Output() for parent-child communication.
  • Avoid direct sibling communication.
  • Use services for shared state.
  • Keep components loosely coupled.
  • Use Signals for new Angular applications.
  • Avoid deeply nested event chains.
  • Keep communication predictable and testable.

Common Mistakes

  • Using ViewChild when @Input() is sufficient.
  • Communicating directly between sibling components.
  • Storing application state inside components.
  • Creating circular dependencies between services.
  • Forgetting to unsubscribe from service Observables.
  • Using too many EventEmitters in deeply nested components.

Advantages

Feature Benefit
@Input() Simple data flow
@Output() Event-driven communication
Shared Service Loose coupling
BehaviorSubject Reactive state
Signals Cleaner state management
ViewChild Direct component access
Content Projection Reusable layouts

Top 10 Angular Component Communication Interview Questions

1. What are the different ways components communicate in Angular?

Answer

Angular supports:

  • @Input()
  • @Output()
  • ViewChild
  • Template Reference Variables
  • Shared Services
  • RxJS Subject/BehaviorSubject
  • Signals
  • Content Projection (ng-content)

2. What is @Input()?

Answer

@Input() allows a parent component to pass data to a child component through property binding.

3. What is @Output()?

Answer

@Output() allows a child component to notify the parent by emitting custom events using EventEmitter.

4. What is the difference between @Input() and @Output()?

@Input() @Output()
Parent → Child Child → Parent
Passes data Sends events
Uses property binding Uses event binding

5. How do sibling components communicate?

Answer

Sibling components communicate through a shared service, typically using BehaviorSubject, Subject, or Signals to share state.

6. When should ViewChild be used?

Answer

Use ViewChild when the parent needs direct access to a child component, such as invoking methods, accessing properties, or manipulating the view after initialization.

7. What is the difference between Subject and BehaviorSubject?

Answer

A BehaviorSubject stores the latest value and immediately provides it to new subscribers, while a Subject emits only future values.

8. What are Signals?

Answer

Signals are Angular's modern reactive state management feature. They automatically notify dependent components when their value changes, reducing the need for manual subscriptions.

9. What is Content Projection?

Answer

Content Projection allows a parent component to inject custom HTML into a child component using the <ng-content> element, making reusable layout components possible.

10. Which communication technique should be used in an enterprise Angular application?

Answer

  • @Input() and @Output() for parent-child communication.
  • Shared Services or Signals for shared application state.
  • ViewChild only when direct interaction with a child component is necessary.
  • Avoid tightly coupling components to improve maintainability.

Interview Cheat Sheet

Communication Type Technique
Parent → Child @Input()
Child → Parent @Output()
Parent → Child Method ViewChild
Sibling ↔ Sibling Shared Service
Global State BehaviorSubject / Signals
Template Access Template Reference Variable
Reusable Layout ng-content
Angular 17+ State Signals

Summary

Component communication is a core concept in Angular application development. Angular provides multiple communication mechanisms, each designed for a specific scenario—from simple parent-child interactions using @Input() and @Output() to enterprise-scale state management using shared services, RxJS, and Signals. Choosing the right communication technique results in loosely coupled, maintainable, and scalable applications that are easier to test and extend.

Next Article

➡️ 14-Angular-Templates-QA.md