Sign in
Skip to solution
mediumFrontend

How do you pass data between sibling components that don't have a direct parent-child relationship?

470 views
01

Understand the problem

Describe cross-component communication using services or state management.

componentsstate
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

Sibling communication is achieved using a shared @Injectable() service containing an RxJS BehaviorSubject or a Signal. One component pushes data into the service, and the sibling component subscribes to the observable or reads the signal to receive updates.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

Sibling data sharing using a shared service and Signals
import { Injectable, Component, signal, inject } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class DataService {
  private messageSignal = signal<string>('Hello');
  message = this.messageSignal.asReadonly();

  updateMessage(newMsg: string) {
    this.messageSignal.set(newMsg);
  }
}

@Component({
  selector: 'app-sibling-a',
  standalone: true,
  template: '<button (click)="send()">Send Alert</button>'
})
export class SiblingAComponent {
  private dataService = inject(DataService);
  send() {
    this.dataService.updateMessage('Clicked in Sibling A');
  }
}

@Component({
  selector: 'app-sibling-b',
  standalone: true,
  template: '<p>Message: {{ dataService.message() }}</p>'
})
export class SiblingBComponent {
  dataService = inject(DataService);
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 55 of 121 decoded in the Angular track. One more won't hurt.

Back to track