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

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);
}