How to Pass Data from One Component to Another Component in Angular?

Passing data between components in Angular is a very common interview topic, and interviewers usually expect you to explain all communication patterns clearly with use-cases.

Let’s break it down in a structured, interview-friendly way

1. Parent → Child (Using `@Input`)

This is the most basic and commonly used method.

✅ Concept

Parent sends data to child via property binding.

✅ Example

Parent Component

<app-child [userName]="name"></app-child>

name = "Sampath";

Child Component

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

export class ChildComponent {
  @Input() userName!: string;
}

Key Points

Data flows one-way (parent → child)
Works via property binding
Used when parent owns the data

2. Child → Parent (Using `@Output` + EventEmitter)

✅ Concept

Child sends data back to parent using events.

✅ Example

Child Component

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

export class ChildComponent {
  @Output() notify = new EventEmitter<string>();

  sendData() {
    this.notify.emit("Hello Parent");
  }
}

Parent Component

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

receiveData(data: string) {
  console.log(data);
}

Key Points

Uses EventEmitter
Follows event-driven architecture
Used for button clicks, form submissions

3. Sibling Components (Using Shared Service)

✅ Concept

When two components are unrelated, use a shared service with Observables.

✅ Example

Service

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

@Injectable({ providedIn: 'root' })
export class DataService {
  private dataSource = new Subject<string>();
  data$ = this.dataSource.asObservable();

  sendData(data: string) {
    this.dataSource.next(data);
  }
}

Sender Component

constructor(private dataService: DataService) {}

send() {
  this.dataService.sendData("Hello from sibling");
}

Receiver Component

constructor(private dataService: DataService) {}

ngOnInit() {
  this.dataService.data$.subscribe(data => {
    console.log(data);
  });
}

Key Points

Uses RxJS Observables
Enables loosely coupled communication
Works for sibling or distant components

4. Using `ViewChild` (Parent accesses Child directly)

✅ Concept

Parent directly calls child’s methods or properties.

Example

@ViewChild(ChildComponent) child!: ChildComponent;

ngAfterViewInit() {
  this.child.someMethod();
}

Key Points

Tight coupling
Use only when necessary
Not preferred for large apps

5. Using Route Parameters

✅ Concept

Pass data while navigating between pages.

Example

this.router.navigate(['/user', userId]);

this.route.params.subscribe(params => {
  console.log(params['id']);
});

Key Points

Used in routing scenarios
Data visible in URL

6. Using State in Router

this.router.navigate(['/path'], { state: { data: myData } });

const data = history.state.data;

Key Points

Data is not visible in URL
Lost on page refresh

Interview Summary Answer

If interviewer asks directly:

“There are multiple ways to pass data between Angular components depending on their relationship:”

Parent → Child → @Input
Child → Parent → @Output + EventEmitter
Siblings → Shared Service with Observables
Direct access → ViewChild
Navigation → Route params / Router state

“In real-world applications, we mostly use @Input/@Output for direct communication and services with Observables for scalable communication.”